CanvasRenderingContext2D: Methode resetTransform()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Methode
CanvasRenderingContext2D.resetTransform()
der Canvas 2D API setzt die aktuelle Transformation auf die Einheitsmatrix zurück.
Syntax
resetTransform()
Beispiele
Zurücksetzen der Matrix
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
Fortfahren mit einer regulären Matrix
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.
Polyfill
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);
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-resettransform-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D