HTML and CSS Reference
In-Depth Information
tion
(0, 0)
gezeichnet, erscheint jedoch auf dem transformierten Canvas ab Position
(100, 100)
.
Stellen Sie sich vor, Sie haben eine JavaScript-Funktion geschrieben, die eine relativ
komplexe Zeichenoperation beinhaltet. Um exakt gleiche Zeichenoperationen an zwei
Stellen im Canvas anzuwenden, ist es sinnvoll, vor jedem Aufruf dieser Funktion den
aktuellen Zustand zu speichern, die gewünschte Transformation (
translate
) anzu-
wenden, um den Ursprung zu verschieben, die eigentliche Zeichenoperation dann
anzuwenden, den Zustand wiederherzustellen und dann die nächste Transformation
und Zeichenoperation anzuwenden.
Bild 2.22:
Beispiel zu den Canvas-Transformationen.
Die
rotate
-Transformation dreht den kompletten Canvas und wird mit Werten im
Bogenmaß aufgerufen. Aus diesem Grund zeigt folgendes Beispiel, wie zunächst unter
Anwendung der Hilfsfunktion der Wert ins Bogenmaß umgewandelt wird:
//rotate
ctx.save();
ctx.translate(140, 150);
ctx.rotate(getRadians(90));
ctx.fillText('rotated 90deg', 0, 0);
ctx.restore();
Es werden dann zwei Transformationen angewandt: Die erste Transformation,
translate()
, bewegt den Ursprung an die Position
(140, 150)
. Im nächsten Schritt
wird der Canvas dann per
rotate
-Transformation um 90 Grad gedreht. Anhand der
Grafik können Sie erkennen, dass die Zeichenoperation an Position
(0, 0)
von
translate()
und
rotate()
transformiert wird.
Zuletzt betrachten wir die Transformation
scale
, die den Canvas skaliert. Die x-/y-
Skalierung kann mittels getrennter Parameter angegeben werden, somit können auch
nicht proportionale Skalierungen erreicht werden. Die Zahl 1 steht in diesem Fall für
100 %, also die aktuelle Skalierung des Canvas. Ein Wert unter 1, also beispielsweise 0,5,
würde nachträglich gezeichnete Objekte um 50 % verkleinert darstellen, ein Wert über 1
vergrößert alle Zeichenoperationen. Folgendes Beispiel skaliert zunächst auf 200 % und
wendet dann eine Textzeichenoperation an, die vergrößert wird.
