CanvasRenderingContext2D: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.
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");
// 绘制一个旋转 45 度的矩形
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);
// 将变换矩阵重置为单位矩阵
ctx.resetTransform();
结果
继续使用常规矩阵
在绘制变换形状后,应在渲染其他内容之前调用 resetTransform()
。在这个例子中,前两个形状使用了倾斜变换绘制,而后两个形状使用了恒等(常规)变换。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 倾斜的矩形
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);
// 非倾斜的矩形
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);
规范描述
Specification |
---|
HTML Standard # dom-context-2d-resettransform-dev |
浏览器兼容性
BCD tables only load in the browser
参见
- 定义此方法的接口:
CanvasRenderingContext2D