CanvasRenderingContext2D: getTransform() 方法
CanvasRenderingContext2D.getTransform() 方法（Canvas 2D API）用于检索当前应用于画布上下文的变换矩阵。
语法
js
getTransform()
参数
无。
返回值
一个 DOMMatrix 对象。
变换矩阵描述如下：
注意： 返回的对象不是实时的，因此更新它不会影响当前的变换矩阵，而更新当前的变换矩阵也不会影响已经返回的 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();
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-gettransform-dev |
浏览器兼容性
加载中…