CanvasRenderingContext2D.transform()
CanvasRenderingContext2D.transform()
是 Canvas 2D API 使用矩阵多次叠加当前变换的方法,矩阵由方法的参数进行描述。你可以缩放、旋转、移动和倾斜上下文。
参见 setTransform()
方法,这个方法使用单位矩阵重新设置当前的变换并且会调用 transform()
。
语法
void ctx.transform(a, b, c, d, e, f);
变换矩阵的描述:
参数
a (m11)
-
水平缩放。
b (m12)
-
垂直倾斜。
c (m21)
-
水平倾斜。
d (m22)
-
垂直缩放。
e (dx)
-
水平移动。
f (dy)
-
垂直移动。
示例
倾斜形状
这是一段使用 transform
方法的简单的代码片段。
HTML
<canvas id="canvas"></canvas>
JavaScript
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 Standard # dom-context-2d-transform-dev |
浏览器兼容性
BCD tables only load in the browser