CanvasRenderingContext2D：transform() 方法
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Canvas 2D API 的 CanvasRenderingContext2D.transform() 方法用于将由该方法的参数所描述的矩阵与当前的变换相乘。你可以缩放、旋转、平移和倾斜上下文。
备注：
还可以查看 setTransform() 方法，该方法将当前变换重置为单位矩阵，然后调用 transform() 方法。
语法
js
transform(a, b, c, d, e, f)
变换矩阵的描述：。
参数
a（m11）-
矩阵中第一行第一列的单元格。
b（m12）-
矩阵中第二行第一列的单元格。
c（m21）-
矩阵中第一行第二列的单元格。
d（m22）-
矩阵中第二行第二列的单元格。
e（m41）-
矩阵中第一行第三列的单元格。
f（m42）-
矩阵中第二行第三列的单元格。
如果一个点原始坐标为 ，经过变换后，其坐标将变为 。这意味着：
e和f控制上下文的水平和垂直平移。- 当
b和c为0时，a和d控制上下文的水平和垂直缩放。 - 当
a和d为1时，b和c控制上下文的水平和垂直倾斜。
返回值
无（undefined）。
示例
倾斜形状
这个示例将一个矩形进行了垂直（.2）和水平（.8）方向的倾斜，同时保持缩放和平移不变。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
结果
规范
| Specification |
|---|
| HTML # dom-context-2d-transform-dev |
浏览器兼容性
Loading…