此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2020年7月.
Canvas 2D API 的 CanvasRenderingContext2D.getTransform() 方法用于获取当前被应用到上下文的变换矩阵。
语法
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();
结果
[フレーム]
规范
| Specification |
|---|
| HTML # dom-context-2d-gettransform-dev |
浏览器兼容性
Loading...