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 |