Information Technology Reference
In-Depth Information
Abbildung 5.35:
Die Grundtransformationen »scale()«, »rotate()« und »translate()«
context.scale(x, y)
context.rotate(angle)
context.translate(x, y)
Beim Skalieren über
scale()
benötigen wir zwei Multiplikanden als Argumen-
te für die Größenänderung der
x
- und
y
-Dimension, Rotationen mit
rotate()
verlangen den Drehwinkel im Uhrzeigersinn in Radiant, und Verschiebungen
durch
translate()
definieren Offsets in
x
- und
y
-Richtung in Pixel. Bei Kombi-
nation der Methoden müssen die einzelnen Transformationen in umgekehrter
Reihenfolge ausgeführt werden - aus Sicht des JavaScript-Codes also quasi
von hinten nach vorne gelesen werden:
Um zuerst zu skalieren und dann zu rotieren, schreiben wir:
context.rotate(0.175);
context.scale(0.75,0.75);
context.fillRect(0,0,200,150);
Wollen wir zuerst rotieren und dann verschieben, lautet der JavaScript-Code:
context.translate(100,50);
context.rotate(0.175);
context.fillRect(0,0,200,150);
