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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getTransform

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见