CanvasRenderingContext2D: Methode resetTransform()

Dieses Beispiel zeichnet ein gedrehtes Rechteck nach einer Modifikation der Matrix und setzt dann die Matrix mit der Methode resetTransform() zurück.

HTML

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

JavaScript

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

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 von transformierten Formen fertig sind, sollten Sie resetTransform() aufrufen, bevor Sie irgendetwas anderes rendern. In diesem Beispiel werden die ersten beiden Formen mit einer Schertransformation gezeichnet, und die letzten beiden 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 gescherten Rechtecke sind grau, und die nicht gescherten Rechtecke sind rot.

Sie können auch die Methode setTransform() 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