HTML and CSS Reference
In-Depth Information
x y (280/10)*i;
ctx.fillRect(x, y, 20, 20);
}
2.3.6 Transformationen
Zu den von der Canvas-API unterstützten Transformationen zählen Skalierung, Rotation
und Translation. Bevor wir diese Transformationen jedoch anhand kurzer Beispiele
vorstellen, sollten Sie unbedingt mit den Methoden
save()
und
restore()
vertraut sein.
canvas.save()
speichert den aktuellen Zustand des Canvas auf den Stack,
canvas.
restore()
stellt den zuletzt gesicherten Zustand wieder her. Zum Zustand des Canvas
gehören dabei:
•
sämtliche Transformationen, die aktuell angewendet werden,
•
sämtliche Attribute des Canvas, also
strokeStyle
,
fillStyle
,
lineWidth
etc., sowie
•
der aktuelle Clipping Path.
save()
und
restore()
erlauben es Ihnen, den aktuellen Zustand zu speichern, eine
Transformation und Zeichenoperationen anzuwenden und dann wieder zu dem alten
Zustand zurückzukehren. Je komplexer Ihre Zeichnungen werden, desto mehr werden
Sie
save()
und
restore()
schätzen, da diese Methoden Ihnen ermöglichen, den Über-
blick zu behalten. Sie werden die Funktion der Methoden neben dieser theoretischen
Vorstellung anhand von Beispielen auch praktisch kennenlernen.
Neben den Transformationen
scale
,
rotate
und
translate
erlaubt die Methode
transform()
die direkte Veränderung der Transformationsmatrix. Diese Transforma-
tionen werden über die gleichnamigen Methoden angesprochen:
void scale(in float x, in float y);
void rotate(in float angle);
void translate(in float x, in float y);
Die
translate()-
Methode wird dazu verwendet, den Ursprung des kompletten
Canvas an eine andere Position zu verschieben. Wenn sich der Punkt
(0, 0)
norma-
lerweise an der oberen linken Ecke des Canvas befindet, befindet er sich nach ange-
wandter
translate(100, 100)
an Position
(100, 100)
. Alle nachfolgenden
Zeichenoperationen werden also automatisch von diesem neuen Ursprung aus gezeich-
net. Das folgende Beispiel demonstriert das:
//translate the drawing context
ctx.save();
ctx.translate(100, 100);
ctx.fillText('translated 100,100', 0, 0);
ctx.restore();
Zunächst wird mittels
save()
der aktuelle Zustand gespeichert. Für eine einzelne
Transformation mit Zeichenoperation wäre das freilich nicht notwendig, es dient hier
jedoch der Demonstration. Im nächsten Schritt wird dann der Ursprung auf den Punkt
(100, 100)
gelegt. Der nun mittels
fillText()
gezeichnete Text wird zwar an Posi-
