CanvasRenderingContext2D
.getTransform()
方法获取当前被应用到上下文的转换矩阵
语法
let storedTransform = ctx.getTransform();
参数
无.
返回值
示例
在以下例子,我们有两个 <canvas>
元素。我们使用 CanvasRenderingContext2D.setTransform()
设置一个转换到第一个画布,并在上面画一个矩形,然后通过 getTransform()
获取矩阵。
然后我们将获取到的矩阵作为 DOMMatrix
参数传给 setTransform()
设置到第二个画布,并在上面画一个圆。
HTML
<canvas width="240"></canvas>
<canvas width="240"></canvas>
CSS
canvas {
border: 1px solid black;
}
JavaScript
const canvases = document.querySelectorAll('canvas');
const ctx1 = canvases[0].getContext('2d');
const ctx2 = canvases[1].getContext('2d');
ctx1.setTransform(1, .2, .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 | Status | Comment |
---|---|---|
HTML Living Standard CanvasRenderingContext2D.getTransform |
Living Standard |
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
参见
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.transform()