CanvasRenderingContext2D: resetTransform() Methode

Syntax

resetTransform()

Parameter

Keine.

Rückgabewert

Keine (undefined).

Beispiele

Zurücksetzen der Matrix

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

HTML

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

JavaScript

Die rotate() Methode rotiert die Transformationsmatrix um 45°. Die fillRect() Methode zeichnet ein gefülltes Rechteck, angepasst gemäß dieser Matrix.

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

Fortfahren mit einer regulären Matrix

Wann immer Sie mit dem Zeichnen transformierter Formen fertig sind, sollten Sie resetTransform() aufrufen, bevor Sie irgendetwas anderes rendern. In diesem Beispiel werden die ersten zwei Formen mit einer Scherentransformation gezeichnet, und die letzten zwei mit der Einheitstransformation (regelmäßig).

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 gescherte Rechtecke sind grau, und die nicht gescherte Rechtecke sind rot.

Polyfill

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);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D