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 July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.transform() 方法用于将由该方法的参数所描述的矩阵与当前的变换相乘。你可以缩放、旋转、平移和倾斜上下文。

备注： 还可以查看 setTransform() 方法，该方法将当前变换重置为单位矩阵，然后调用 transform() 方法。

语法

js
transform(a, b, c, d, e, f)

变换矩阵的描述：[ a c e b d f 0 0 1 ] \left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]。

参数

a（m11）

矩阵中第一行第一列的单元格。

b（m12）

矩阵中第二行第一列的单元格。

c（m21）

矩阵中第一行第二列的单元格。

d（m22）

矩阵中第二行第二列的单元格。

e（m41）

矩阵中第一行第三列的单元格。

f（m42）

矩阵中第二行第三列的单元格。

如果一个点原始坐标为 (x,y)(x, y)，经过变换后，其坐标将变为 (ax+cy+e,bx+dy+f)(ax + cy + e, bx + dy + f)。这意味着：

  • 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 Standard
# dom-context-2d-transform-dev

浏览器兼容性

BCD tables only load in the browser

参见