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 |
瀏覽器相容性
載入中…