HTML5 -Instanz -Tutorial: Canvas -Tag implementiert die Matrix -Transformation

Artikeleinführung von Wulin.com (www.vevb.com): Die Anwendung von Canvas -Tags für HTML5 Daily Practice - Matrix -Transformation.

Bisher haben wir die Graph -Transformationstechnologie gelernt, die unter Verwendung der Koordinatentransformation implementiert wurde. Wenn die Koordinatentransformation unseren Anforderungen nicht erfüllen kann, können wir die Matrix -Transformationstechnologie verwenden. Als nächstes werden wir komplexere Matrix -Transformations- und Deformationstechniken einführen.

Matrix wird speziell verwendet, um eine grafische Verformung zu erreichen. Es wird zusammen mit Koordinaten verwendet, um den Zweck der Verformung zu erreichen. Wenn der Grafikkontext erstellt wird, wird tatsächlich eine Standard -Transformationsmatrix erstellt. Wenn diese Matrix nicht modifiziert wird, zeichnet die im nächsten Mal gezogene Abbildung die Abbildung mit der oberen linken Ecke der Leinwand als Koordinatenursprung. Die gezogene Figur wird nicht skaliert und deformiert. Wenn diese Transformationsmatrix jedoch geändert wird, ist die Situation unterschiedlich.

Transformationsmethode

context.transform (a, b, c, d, x, y);

Diese Methode hat 6 Parameter, unter denen die vier Parameter A, B, C und D hauptsächlich zur Verformung der Abbildung verwendet werden; X und Y stellen bewegliche Koordinatenpunkte dar.

Die drei im vorherigen Abschnitt genannten Methoden unter Verwendung der Koordinatentransformation für die Grafikdeformation:

übersetzen (x, y);

Skala (x, y);

drehen (Winkel);

Sie können alle durch die Transformationsmethode und die sechs Parameter im Kontext ersetzt werden. sind wie folgt:

übersetzen (x, y);

Skala (a, d);

Drehen (b, c); // Diese Methode hat tatsächlich nur einen Parameter. Um das Verständnis zu erleichtern und der Transformation zu entsprechen, werden die verbleibenden 2 Parameter verwendet. Ich habe es hierher gesetzt, um Ihnen zu sagen, dass diese beiden Parameter in der Funktion ähnlich sind und mit der Rotation zusammenhängen.

Code -Fall