CanvasRenderingContext2D：setTransform() 方法

语法

setTransform(a, b, c, d, e, f)
setTransform(matrix)

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

这个变换矩阵会乘以代表画布上每个绘制点的列向量的左边，以生成画布上使用的最终坐标。

参数

setTransform() 接受两种类型的参数。旧的类型包含几个参数，用于表示要设置的变换矩阵的各个分量。

a (m11)

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

b (m12)

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

c (m21)

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

d (m22)

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

e (m41)

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

f (m42)

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

或者，你可以传递一个单一参数，该参数是一个对象，其中包含上述值作为属性。参数名称即属性键，如果存在两个同义名称（例如 m11 和 a），它们必须是相同的数值，否则将抛出 TypeError。使用对象形式可以省略某些参数 — a 和 d 默认为 1，而其余参数默认为 0。

如果一个点的原始坐标是$(x, y)$，那么变换后它的坐标将是$(ax + cy + e, bx + dy + f)$。这意味着

• e 和 f 控制着画布的水平和垂直平移。
• 当 b 和 c 为 0 时，a 和 d 控制着画布的水平和垂直缩放。
• 当 a 和 d 为 1 时，b 和 c 控制着画布的水平和垂直倾斜。

返回值

无（undefined）。

示例

倾斜形状

此示例将矩形垂直（.2）和水平（.8）倾斜。缩放和平移保持不变。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

结果

检索和传递 DOMMatrix 对象

在下面的示例中，我们有两个 <canvas> 元素。我们使用第一种类型的 setTransform() 方法为第一个元素的上下文应用变换，并在其上绘制一个正方形，然后使用 CanvasRenderingContext2D.getTransform() 方法从中检索矩阵。

然后，我们将检索到的矩阵直接应用于第二个画布上下文，方法是将 DOMMatrix 对象直接传递给 setTransform()（即第二种类型），并在其上绘制一个圆形。

HTML

<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();

结果

规范

浏览器兼容性

另见

• 定义此方法的接口：CanvasRenderingContext2D
• CanvasRenderingContext2D.transform()