CanvasRenderingContext2D: transform() 方法
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);
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-transform-dev |
浏览器兼容性
加载中…