CanvasRenderingContext2D：resetTransform() 方法

基线 广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2015 年 7 月.

Canvas 2D API 的CanvasRenderingContext2D.resetTransform()方法将当前变换重置为单位矩阵。

语法

js
resetTransform()

示例

重置矩阵

此示例在修改矩阵后绘制一个旋转的矩形，然后使用resetTransform()方法重置矩阵。

HTML

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

JavaScript

rotate()方法将变换矩阵旋转 45°。fillRect()方法绘制一个填充矩形，并根据该矩阵进行调整。

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

结果

继续使用常规矩阵

在完成绘制变换后的形状后，应在渲染任何其他内容之前调用resetTransform()。在此示例中，前两个形状使用倾斜变换绘制，后两个形状使用单位（常规）变换绘制。

HTML

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

JavaScript

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

结果

倾斜的矩形为灰色，非倾斜的矩形为红色。

Polyfill

您还可以使用setTransform()方法将当前变换重置为单位矩阵，如下所示

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

规范

规范
HTML 标准
# dom-context-2d-resettransform-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅