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