CanvasRenderingContext2D: getTransform() 方法
报告反馈
语法
Canvas 2D API 的
CanvasRenderingContext2D.getTransform() 方法检索当前应用于上下文的变换矩阵。getTransform()
js
参数
无。
返回值
一个 DOMMatrix 对象。
\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
示例
注意： 返回的对象不是实时的，因此更新它不会影响当前的变换矩阵，并且更新当前的变换矩阵不会影响已经返回的 DOMMatrix。
在下面的示例中，我们有两个 <canvas> 元素。我们使用 CanvasRenderingContext2D.setTransform() 对第一个元素的上下文应用变换并绘制一个正方形，然后使用 getTransform() 从中检索矩阵。
HTML
然后，我们将检索到的矩阵直接应用于第二个画布上下文，方法是将
DOMMatrix 对象直接传递给 setTransform()，并在其上绘制一个圆圈。<canvas width="240"></canvas> <canvas width="240"></canvas>
CSS
html
canvas {
border: 1px solid black;
}
JavaScript
Canvas 2D API 的
CanvasRenderingContext2D.getTransform() 方法检索当前应用于上下文的变换矩阵。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();
css
规范
| 结果 |
|---|
| 规范 # HTML 标准 |
浏览器兼容性
dom-context-2d-gettransform-dev