CanvasRenderingContext2D: resetTransform() Methode

Keine.

Keine (undefined).

Dieses Beispiel zeichnet ein gedrehtes Rechteck nach der Modifizierung der Matrix und setzt dann die Matrix mithilfe der resetTransform()-Methode zurück.

HTML

<canvas id="canvas"></canvas>

JavaScript

Die rotate()-Methode dreht die Transformationsmatrix um 45°. Die fillRect()-Methode zeichnet ein gefülltes Rechteck, das entsprechend dieser Matrix angepasst ist.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw a rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// Reset transformation matrix to the identity matrix
ctx.resetTransform();

Ergebnis

Wann immer Sie mit dem Zeichnen transformierter Formen fertig sind, sollten Sie resetTransform() aufrufen, bevor Sie etwas anderes rendern. In diesem Beispiel werden die ersten zwei Formen mit einer Verformungstransformation gezeichnet, und die letzten zwei mit der Einheits- (regulären) Transformation.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Skewed rectangles
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

// Non-skewed rectangles
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

Ergebnis

Die verzerrten Rechtecke sind grau, und die nicht verzerrten Rechtecke sind rot.

Sie können auch die setTransform()-Methode verwenden, um die aktuelle Transformation auf die Einheitsmatrix zurückzusetzen, wie folgt:

ctx.setTransform(1, 0, 0, 1, 0, 0);

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D