CanvasRenderingContext2D: transform() 方法

基线 广泛可用

此功能非常成熟，可以在许多设备和浏览器版本中运行。 它从 2015 年 7 月.

报告反馈

CanvasRenderingContext2D.transform() 方法是 Canvas 2D API 的一部分，它使用此方法的参数所描述的矩阵，将当前变换与该矩阵相乘。 这允许您缩放、旋转、平移（移动）和倾斜上下文。

语法

注意： 另请参见 setTransform() 方法，该方法将当前变换重置为单位矩阵，然后调用 transform()。
transform(a, b, c, d, e, f)

js [ 变换矩阵由 a c e b d 0 0 1 ] f .

\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) ( 变换矩阵由 如果一个点最初的坐标为 + a x + c , e 如果一个点最初的坐标为 + b x + d ) ，则变换后其坐标将为 (ax + cy + e, bx + dy + f)

  • 。 这意味着
  • e 和 f 控制上下文的水平和垂直平移。
  • 当 b 和 c 为 0 时，a 和 d 控制上下文的水平和垂直缩放。

当 a 和 d 为 1 时，b 和 c 控制上下文的水平和垂直倾斜。

返回值

示例

无 (undefined).

倾斜形状

HTML

此示例在垂直方向 (.2) 和水平方向 (.8) 上倾斜矩形。 缩放和平移保持不变。
<canvas id="canvas"></canvas>

JavaScript

注意： 另请参见 setTransform() 方法，该方法将当前变换重置为单位矩阵，然后调用 transform()。
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

规范

结果
规范
# HTML 标准

浏览器兼容性

dom-context-2d-transform-dev

另请参阅