Canvas - HTML5 - page 168

context.setTransform(1,0,0,1,0,0);
}
};
Listing 5.2: Quellcode für die Transformationen der Abbildung 5.36

Sobald das Bild geladen ist, definieren wir den Rotationswinkel rotate mit 15°,
die Start- und Endskalierungen scaleStart mit 0.0 sowie scaleEnd mit 4.0 und
daraus abgeleitet das Inkrement für die Skalierung scaleInc mit dem Ziel, in-
nerhalb einer ganzen Umdrehung die Endskalierung 4.0 zu erreichen. In der
for -Schleife rotieren wir dann das Bild gegen den Uhrzeigersinn jeweils um
15°, skalieren es von 0.0 bis 4.0 und setzen seine linke obere Ecke auf die Ko-
ordinate 540/260.

Offen bleibt, was es mit der Methode setTransform() am Ende der for -Schleife
auf sich hat und um wen es sich bei dem Skispringer handelt, der sich wage-
mutig vom Taft Point in den Abgrund stürzt. Ersteres werden wir gleich klären,
Zweiteres wird sich erst bei einem Blick in den Quellcode des Beispiels auflö-
sen - Danke an Swiss-Ski.ch für das Zurverfügungstellen des Bildes ...

Neben den drei Grundtransformationen scale() , rotate() und translate()
stellt Canvas noch zwei weitere Methoden zur Veränderung des Koordinaten-
systems und damit der sogenannten Transformationsmatrix bereit: transform()
und das bereits in Listing 5.2 angesprochene setTransform() :

context.transform(m11, m12, m21, m22, dx, dy);
context.setTransform(m11, m12, m21, m22, dx, dy);

Beiden gemeinsam sind die Argumente m11 , m12 , m21 , m22 , dx und dy , die folgen-
de Tranformationseigenschaften repräsentieren:

Komponente Inhalt

m11

Skalierung in x-Richtung

m12

Horizontaler Scherfaktor

m21

Vertikaler Scherfaktor

m22

Skalierung in y-Richtung

dx

Verschiebung in x-Richtung

dy

Verschiebung in y-Richtung

Tabelle 5.3: Komponenten einer Canvas-Matrix-Transformation