HTML5 Canvas-Transformation

HTML5 Transformationsmethoden von Canvas, Online-Beispiel zur Demonstration der Verwendung von HTML5 Canvas drehen, verschieben, skalieren, um verschiedene Punkte zu drehen, Skalierungseinstellungen vornehmen und mehr.

Sie können Transformationen auf HTML5jegliches auf dem Canvas gezeichnetes Element. Hier ist eine Liste der anwendbaren Transformationen:

• bewegen (bewegen Sie das gezeichnete Element)

• Das Ergebnis beim Zeichnen auf dem Canvas ist:

• skalieren

In diesem Artikel werden alle diese Transformationen vorgestellt

Transformationsmatrix

Es kann2Setzen Sie die Transformationsmatrix im D-Kontext. Diese Matrix wird mit allen auf dem Canvas gezeichneten Inhalten multipliziert. Für die in diesem Tutorial verwendeten Beispiele habe ich sie auf die "Identitätsmatrix" gesetzt, die die x, y-Koordinaten multipliziert, um x, y zu ergeben. Mit anderen Worten, es wird keine Transformation durchgeführt.
Dies ist die Methode, um die Transformationsmatrix auf die Einheitsmatrix zu setzen:

context.setTransform(1,　0,　0,　1,　0,　0,

,　0,　0);

Mobile

Mobile können auf alles angewendet werden, was auf dem Canvas gezeichnet wird. Mobile bedeutet die Neuer定位 von gezeichnetem Inhalt. Dies ist die Art und Weise, wie Sie in Ihrem Code das Mobile einstellen:　100;
var　x　=　　50;
var　y　=

context.translate(x,　y);10Dieser Beispielcode bewegt alle gezeichneten Formen auf dem Canvas entlang der x-Achse50，entfernt sich in der y-Achse
0.
Beachten Sie: Die Translation ist nur für Formen gültig, die nach dem Aufruf von translate() gezeichnet werden. Formen, die vor dem Aufruf gezeichnet werden, werden nicht beeinflusst.

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle = "#0000ff";
context.fillRect(10,10,　100,　100);
</script>

Dies ist ein weiteres Beispiel. Zwei Rechtecke werden an denselben Koordinaten gezeichnet, aber ein Rechteck wird vor und ein Rechteck nach dem Aufruf von translate() gezeichnet

Das Ergebnis beim Zeichnen auf dem Canvas ist:

Rotation5Sie können eine automatische Rotation auf das HTML anwenden2Jegliche Form, die auf dem Canvas gezeichnet wird. Dies wird durch rotate() erreicht

Die Funktion ist auf dem D-Context abgeschlossen. Dies ist ein einfaches Beispiel:

context.rotate(radians);
Die umzudrehenden Winkel werden als Parameter an die rotate() Funktion übergeben. Dieser Wert muss in Bogenmaß und nicht in Grad angegeben werden.
Wie bei der Translation wird die Rotation nur auf alle Formen angewendet, die nach dem Aufruf von rotate() gezeichnet werden. Formen, die vor dem Aufruf gezeichnet werden, werden nicht beeinflusst.
Dies ist ein Beispiel, wie ein gleicher Rechteck vor und nach der Rotation gezeichnet wird:

<canvas id="ex2" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
　context.fillStyle = "#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
　context.fillStyle = "#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

Das Aussehen beim Zeichnen eines Rechtecks auf dem Canvas ist:

Drehung um verschiedene Punkte

Wie bereits erwähnt, drehen sich alle Formen um die obere linke Ecke des Canvas (0,0). Aber was, wenn Sie eine Form um einen anderen Punkt drehen möchten? Zum Beispiel, um ihren eigenen Mittelpunkt zu drehen?
Um eine Form um ihren eigenen Mittelpunkt zu drehen, muss das Canvas zunächst in die Mitte der Form bewegt werden, dann wird das Canvas gedreht, dann wird das Canvas zurück in 0,0 bewegt und die Form wird gezeichnet.
Dies ist ein Code-Beispiel, das ein blauer Rechteck um seinen Mittelpunkt dreht:

<canvas id="ex3" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var x =　10;
var y =　10;
var width =　100;
var height =　100
var　cx　　　　　=　x　+　0.5　*　width;
var　cy　　　　　=　y　+　0.5　*　height;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
context.translate(-cx,　-cy);　//set center back to 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Das Aussehen beim Zeichnen auf dem Canvas ist:

Dieser Beispielcode bewegt zunächst den Mittelpunkt des Canvas in die Mitte des Quadrats (cx, cy). Dann wird das Canvas gedreht25Dann wird das Canvas erneut in den Ursprung 0,0 zurückgeconverted. Jetzt dreht sich das Canvas um cx, cy.25Grad. Alle von Ihnen gezeichneten Inhalte werden um cx, cy gedreht angezeigt. Schließlich wird das Rechteck so gezeichnet, als wäre nichts passiert, aber jetzt wird es um cx, cy gedreht25Grad. Dies kann nur durch Transformationen erreicht werden. Die Koordinaten des Rechtecks bleiben unverändert. Beachten Sie context.fillRect(), die zwei Aufrufe zur Zeichnung der roten und blauen Rechtecke sind identisch. Es sind genau diese Transformationen, die sie an verschiedenen Positionen und Rotationen erscheinen lassen

skalieren

Man kann die Skalierung in HTML5Alle auf dem Bildschirm gezeichneten Formen werden automatisch skaliert.
Bei der Skalierung können Sie alle Koordinaten auf der x- und y-Achse durch bestimmte Faktoren skalieren. Sie können diese Faktoren mit der scale() Funktion einstellen, wie folgt:

var scaleX =　2;
var scaleY =　2;
context.scale(scaleX, scaleY);

In diesem Beispiel wird alle Koordinaten auf der x- und y-Achse skaliert2mal.
Wie translate() und rotate(), wird der Skalierungsfaktor nur auf die Formen angewendet, die nach dem scale() Aufruf gezeichnet werden.
Dies ist ein weiteres Beispielcode für die Zeichnung von roten und blauen Rechtecken, bei dem das Skalierungsfaktor auf das blaue Rechteck angewendet wird:

<canvas id="ex5" width="500" height="250" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas wird nicht unterstützt
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x =　10;
var y =　10;
var width =　100;
var height =　100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2,2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Dies sind die auf dem Bildschirm generierten graphics:

Bitte beachten Sie, dass die Größe des blauen Rechtecks das Doppelte des roten Rechtecks beträgt.
Bitte beachten Sie, dass der Abstand von der linken oberen Ecke des blauen Rechtecks bis zur linken oberen Ecke des Bildschirms (0,0) auch das Doppelte beträgt. Alle Koordinaten werden verdoppelt skaliert, auch die obere linke Ecke des Rechtecks. Um bei der Skalierung die Bewegung der Formen zu vermeiden, muss die Skalierung mit der Verschiebung kombiniert werden.

Skalierungsgrad

Sie können die Zoomfunktion verwenden, um das Verhältnis der Skalierung zu erreichen. Der untere Canvas enthält4Rechtecke. Unten befindet sich ein Eingabefeld, um die Skalierungsstufe (Skalierungsfaktor) zu ändern.

Skalierungsgrad:

Wenn Sie ein Textfeld mit dem Skalierungsgrad sehen, geben Sie einen Wert zwischen1bis10die Skalierungsstufe zwischen, dann verlassen Sie das Textfeld, um das Ergebnis zu betrachten. Wenn Sie einen Schieberegler sehen, bewegen Sie ihn einfach.

Verschiebung, Drehung und Skalierung kombinieren

Natürlich können alle drei Transformationen auf dem gleichen Canvas kombiniert werden. Aber wie bei der Kombination von Rotation und Translation, ist es wichtig,2Der Reihenfolge der Funktionsaufgerufe im 2D-Context ist ebenfalls große Bedeutung beizumessen. Wenn scale() vor translate() und anderen aufgerufen wird, kann das Ergebnis unterschiedlich aussehen. Möglicherweise müssen Sie die Reihenfolge der Funktionsaufgerufe anpassen, um die richtige Funktion zu erzielen.