Canvas (HTML5)

Zweck des <canvas>-Elements

Bisher benötigte man immer Plugins (Flash, Silverlight), um Grafiken in HTML-Seiten zu erzeugen

HTML5 bietet mit <canvas> eine Zeichenfläche

auf die man per JavaScript beliebig zeichnen kann
die sowohl 2D- als auch 3D-Grafik unterstützt
die alle wichtigen Grafikroutinen beherrscht

Zeichnen von Linien, Kreisen, Kurven
Translation, Rotation und beliebige Transformationen
Alphakanäle, Composing und Clipping
Manipulation von Pixel-Bildern

Anlegen eines Canvas

Ein Canvas wird einfach per Tag definiert

<canvas width="400" height="200" id="meincanvas">
Ihr Browser unterstützt leider das &lt;canvas&gt;-Element nicht
</canvas>

Zugriff per JavaScript erfolgt über den Drawing Context

var canvas = document.getElementById("meincanvas");

if (canvas.getContext) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "rgb(255, 0, 0)";
  ctx.fillRect(20, 40, 200, 200);
}
else {
    // Canvas funktioniert nicht (alter Browser)
}

Transformationen

Mögliche Transformationen auf dem Canvas

Verschieben des Ursprungspunktes (Translation)
ctx.translate(x, y)
Drehen des Koordinatensystems (Rotation)
ctx.rotate(radiant)
Skalieren des Koordinatensystems (Skalierung)
ctx.rotate(xfactor, yfactor)
Kombination der Transformationen mit einer Matrix
ctx.setTransform(...) und ctx.transform(...)

Beispiel: Translation

var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, 40, 40); // Rechteck zeichnen
ctx.translate(50, 50);      // Nullpunkt verschieben

ctx.fillRect(0, 0, 40, 40); // Rechteck zeichnen
ctx.translate(50, 50);      // Nullpunkt verschieben

ctx.fillRect(0, 0, 40, 40); // Rechteck zeichnen
ctx.translate(50, 50);      // Nullpunkt verschieben

Beispiel: Rotation

var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.rotate(Math.PI / 4); // Koordinaten um 45 Grad drehen
ctx.fillRect(40, 0, 40, 40); // Rechteck zeichnen

Beispiel: Skalierung

var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.scale(2.0, 0.5); // Koordinaten dehnen und stauchen
ctx.fillRect(0, 0, 40, 40); // Rechteck zeichnen

Grundlegende Zeichenfunktionen

Methode	Beschreibung
`fillRect(x,y,w,h)`	Gefülltes Rechteck zeichnen
`clearRect(x,y,w,h)`	Bereich löschen (Hintergrundfarbe setzen)
`strokeRect(x,y,w,h)`	Rechteckigen Rahmen zeichnen
`beginPath()`	Pfad beginnen
`moveTo(x,y)`	Anfangspunkt einer Linie setzen
`lineTo(x,y)`	Endpunkt einer Linie setzen
`strokePath()`	Linien des Pfades zeichnen

Methode	Beschreibung
`closePath()`	Pfad beenden
`fill()`	Pfad ausfüllen
`arc(...)`	Kreisbogen zeichnen
`arcTo(...)`	Kreisbogen als Teil des Pfades zeichnen
`fillstyle = ...`	Stil für gefüllte Flächen
`strokeStyle = ...`	Stil für Linien
`fillText(s,x,y)`	Text schreiben

Beispiel: Zeichnen

var ctx = canvas.getContext('2d');
ctx.translate(20, 20);
ctx.scale(80, 80);
ctx.strokeStyle = "rgb(0,0,0)";
ctx.lineWidth = "0.05";
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(0, 3);
ctx.lineTo(2, 1);
ctx.lineTo(0, 1);
ctx.lineTo(1, 0);
ctx.lineTo(2, 1);
ctx.lineTo(2, 3);
ctx.lineTo(0, 3);
ctx.lineTo(0, 1);
ctx.lineTo(2, 3);
ctx.stroke();
ctx.closePath();