CanvasRenderingContext2D：getTransform() 方法

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.getTransform() 方法用于获取当前被应用到上下文的变换矩阵。

语法

js
getTransform()

参数

无。

返回值

一个 DOMMatrix 对象。

变换矩阵的描述如下：

[acebdf001]\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]

备注： 返回的对象不是实时的，所以更新它不会影响当前的变换矩阵，同时更新当前的变换矩阵不会影响已经返回的 DOMMatrix。

示例

在以下示例中，我们有两个 <canvas> 元素。我们使用 CanvasRenderingContext2D.setTransform() 设置为第一个画布应用变换，并在上面绘制了一个矩形，然后通过 getTransform() 获取矩阵。

然后我们通过将 DOMMatrix 对象直接传给 setTransform()，以直接将获取到的矩阵应用到第二个画布，并在上面绘制一个圆。

HTML

html
<canvas width="240"></canvas> <canvas width="240"></canvas>

CSS

css
canvas {
  border: 1px solid black;
}

JavaScript

js
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();

结果

规范

Specification
HTML
# dom-context-2d-gettransform-dev

浏览器兼容性

参见