Vorläufige Studiennotizen zu Html5 Canvas (6) -Transformation

In html5 können eine Vielzahl grafischer Transformationen, einschließlich Übersetzung, Skalierung und Drehung, erreicht werden. Es gibt zwei Methoden, nämlich die Matrixmethode und die Funktionsmethode. Im Folgenden wird beschrieben, wie Translation, Skalierung und Rotation mit diesen beiden Methoden implementiert werden können.

1. Übersetzung:

 context.fillRect(50,50,50,50);
 context.translate(100,100);
 context.fillRect(50,50,50,50);

Wenn es keinen Mittelsatz gibt, wird der Effekt nur ein Rechteck sein, da sich das erste Rechteck und das zweite Rechteck überlappen. Der aktuelle Effekt ist die Übersetzung, der Effekt ist wie folgt:

Zunächst sind die in diesem Artikel vorgestellten Methoden alle Zustandswerte, das heißt, sein Gültigkeitsbereich wirkt sich auf den gesamten Code darunter aus. Sie können auch Speichern und Wiederherstellen verwenden, um und zu speichern Popup-Status. Im Folgenden werden Aufruffunktionen zur Lösung des Übersetzungsproblems beschrieben. Wir können die Methode transformieren des Kontexts verwenden Die Matrixänderungsoperation hat sechs Parameter, die für verschiedene Operationen verantwortlich sind. Ich bevorzuge es, diese sechs Parameter als Ganzes einzuführen, was bedeutet, dass diese Parameter jeweils für die Übersetzung, Skalierung und Rotation verantwortlich sind Das Ganze. Insgesamt sind die ersten vier Parameter für Skalierung und Rotation verantwortlich, die letzten beiden Parameter sind Übersetzung, die ersten vier Parameter 1, 4 ist eine Gruppe, 2, 3 ist eine Gruppe, 1 und 2 sind x Werte, 3 und 4 ist der Wert von y, 5 und 6 sind die Übersetzungen von x, y. Wenn der obige Code eine Matrix verwendet, sollte er wie folgt geschrieben werden:

Der zweite Codesatz hier hat die gleiche Bedeutung wie der im dritten Satz auskommentierte Code. Der Grund, warum er in der Gruppe von

context.fillRect(50,50,50,50);
context.transform(1,0,0,1,100,100);
//context.transform(0,1,1,0,100,100);
context.fillRect(50,50,50,50);

1

, 4 sein sollte und 2, 3In diese Gruppe schreiben Sie 1 weil wir Um sicherzustellen, dass das Rechteck nicht skaliert wird, wird die Größe auf 0 skaliert, wenn es 0 ist. 2. Zoom

Sowohl die Skalierung als auch die Drehung erfordern eine Übersetzung. Dies liegt daran, dass es Probleme gibt, wenn wir den folgenden Code schreiben

 context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.scale(0.5,0.5);
 context.fillRect(0,0,50,50);

Dieser Code scheint mit dem obigen Code identisch zu sein, ist aber tatsächlich anders, denn wenn Sie

context.fillRect(50,50,50,50);
 context.scale(0.5,0.5);
 context.fillRect(150,50,50,50);

context.scale

aufrufen, werden alle Koordinaten auf die Hälfte der Originalgröße skaliert will Es unterscheidet sich von dem folgenden Effekt Das Folgende ist ein Vergleich zwischen dem ersten und zweiten Absatz des Codes:

Es ist ersichtlich, dass das letztere Bild falsch ausgerichtet ist.

Die Matrix-Methode wird unten vorgestellt:

Derselbe Effekt wie oben, der Auskommentierung des Codes ist derselbe, er muss auch zuerst übersetzt werden Der erste Parameter und die vierte Parametergruppe sind dieselben wie die zweite und dritte Parametergruppe.

context.fillRect(50,50,50,50);
context.transform(0,0.5,0.5,0,150,50);
//context.transform(0.5,0,0,0.5,150,50);
context.fillRect(0,0,50,50);

3. Drehung

Der folgende Code kann aus dem gleichen Grund übersetzt werden. Der Rotationswinkel ist wie folgt folgt:

context.fillRect(50,50,50,50);
 context.translate(150,50);
 context.rotate(Math.PI/4);
 context.fillRect(0,0,50,50);

下面介绍的是使用矩阵法：

context.fillRect(50,50,50,50);
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
//context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4)
//,Math.sin(Math.PI/4),150,50);
context.fillRect(0,0,50,50);

两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角，或者为负的sin旋转角，cos旋转角，cos旋转角，sin旋转角。

如有错误，希望大家多多指正

 以上就是Html5 Canvas初探学习笔记(6) -变换的内容，更多相关内容请关注PHP中文网（www.php.cn）！