CanvasRenderingContext2D.getTransform()

let storedTransform = ctx.getTransform();

无。

一个 DOMMatrix 对象

转换矩阵被这样描述： $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$

在以下例子，我们有两个 <canvas> 元素。我们使用 CanvasRenderingContext2D.setTransform() 设置一个转换到第一个画布，并在上面画一个矩形，然后通过 getTransform() 获取矩阵。

然后我们将获取到的矩阵作为 DOMMatrix 参数传给 setTransform() 设置到第二个画布，并在上面画一个圆。

HTML

<canvas width="240"></canvas> <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();

结果

• The interface defining this method: CanvasRenderingContext2D
• CanvasRenderingContext2D.transform()