Der Internet Explorer 9 aus Entwicklersicht (Teil 5)
Kommentare

CANVAS (HTML5)
Neu eingeführt wird mit dem IE9 das canvas-Element. Ein canvas-Element stellt eine Fläche für das Zeichnen von Grafiken zur Verfügung. Über die Attribute width und height kann die

CANVAS (HTML5)

Neu eingeführt wird mit dem IE9 das canvas-Element. Ein canvas-Element stellt eine Fläche für das Zeichnen von Grafiken zur Verfügung. Über die Attribute width und height kann die Größe der Zeichenfläche definiert werden. Ohne Größenangabe hat die Zeichenfläche eine Standardbreite von 300 Pixel und eine Standardhöhe von 150 Pixel. Bei der Zeichenfläche handelt es sich um einen beschreibbaren Bitmap-Hintergrund. Um auf den Bitmap-Hintergrund (Canvas) zeichnen zu können, muss zunächst ein so genannter Kontext erstellt werden.

Der Internet Explorer 9 unterstützt den Canvas-2-D-Kontext, der in der Spezifikation für das Canvas-2-D-API des W3C beschrieben wird. Weitere Kontexte werden derzeit nicht unterstützt. Mittels JavaScript und Kontext können dann verschiedene Formen innerhalb der Zeichenfläche erstellt werden. Neben statischen Bildern können durch die Verwendung von JavaScript auch dynamische Benutzeroberflächen umgesetzt werden, die z. B. auf Mausereignisse reagieren. Der Canvas-2-D-Kontext erlaubt die Erstellung der folgenden Formen:

  • Rechtecke
  • Linien
  • Füllungen
  • Bögen
  • Schatten
  • Bézierkurven
  • Bilder
  • Video
  • Kurven anhand quadratischer Gleichungen

Listing 4 demonstriert, wie einige dieser Formen erstellt werden können, und Abbildung 1 zeigt die daraus entstehende Zeichnung im Browser. Wie alle Grafikfunktionen in Internet Explorer 9 nutzt das canvas-Element nicht nur den Prozessor, sondern auch den Grafikprozessor, um eine Beschleunigung der Grafikausgabe zu erreichen. Das canvas-Element bietet viele Funktionen und kann zukünftig teilweise als Ersatz für flashbasierte Animationen verwendet werden.

Listing 4

function Drawing() {
  var canvas = document.getElementById("canvasArea");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(10, 262, 232)";
  ctx.fillRect(35, 5, 50, 50);
  ctx.lineWidth = 15;
  ctx.strokeStyle = "rgb(255, 0, 255)";
  ctx.strokeRect(100, 35, 45, 145);      
  ctx.beginPath();
  ctx.fillStyle = "rgb(20, 162, 232)";
  ctx.arc(240, 158, 70, 0, 2*Math.PI, true);
  ctx.fill();
  ctx.beginPath();
  ctx.moveTo(170, 130);
  ctx.bezierCurveTo(170, 60, 230, 130, 170, 10);
  ctx.stroke();
}  
Abb. 1: Eine mit dem canvas-Element erstellte Grafik
Abb. 1: Eine mit dem canvas-Element erstellte Grafik
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -