CanvasRenderingContext2D：setTransform() 方法
基线 广泛可用
此功能已很好地建立，并且可以在许多设备和浏览器版本上运行。它自 2015 年 7 月.
报告反馈
Canvas 2D API 的 CanvasRenderingContext2D.setTransform() 方法将当前变换重置（覆盖）为单位矩阵，然后调用此方法的参数所描述的变换。这使您可以缩放、旋转、平移（移动）和倾斜上下文。
语法
注意：另请参阅
transform() 方法；它不会覆盖当前变换矩阵，而是将其与给定的矩阵相乘。setTransform(a, b, c, d, e, f)
setTransform(matrix)
js.
\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]
描述。此变换矩阵在左侧乘以代表在画布上绘制的每个点的列向量，以生成画布上使用的最终坐标。
参数
setTransform()接受两种类型的参数。较旧的类型包含多个参数，表示要设置的变换矩阵的各个组件-
a(m11) - 矩阵第一行第一列的单元格。
-
b(m12) - 矩阵第二行第一列的单元格。
-
c(m21) - 矩阵第一行第二列的单元格。
-
d(m22) - 矩阵第二行第二列的单元格。
-
e(m41) - 矩阵第一行第三列的单元格。
-
f(m42)
矩阵第二行第三列的单元格。
或者，您可以传递一个包含上述值作为属性的对象的单个参数。参数名称是属性键，如果两个同义词名称都存在（例如 m11 和 a），则它们必须是相同的数字值，否则会抛出 TypeError。使用对象形式允许省略某些参数 - a 和 d 默认为 1，而其余参数默认为 0。(x, y)(ax + cy + e, bx + dy + f)
- 。这意味着
e和f控制上下文的水平和垂直平移。- 当
b和c为0时，a和d控制上下文的水平和垂直缩放。
当 a 和 d 为 1 时，b 和 c 控制上下文的水平和垂直倾斜。
返回值
示例
无 (undefined).
倾斜形状
HTML
此示例同时垂直 (
.2) 和水平 (.8) 倾斜矩形。缩放和平移保持不变。<canvas id="canvas"></canvas>
JavaScript
注意：另请参阅
transform() 方法；它不会覆盖当前变换矩阵，而是将其与给定的矩阵相乘。const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
html
结果
检索和传递 DOMMatrix 对象
在以下示例中，我们有两个 <canvas> 元素。我们使用第一种 setTransform() 类型对第一个元素的上下文应用变换并绘制一个正方形，然后使用 CanvasRenderingContext2D.getTransform() 从中检索矩阵。
HTML
此示例同时垂直 (
.2) 和水平 (.8) 倾斜矩形。缩放和平移保持不变。<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>
CSS
然后，我们将检索到的矩阵直接应用于第二个画布上下文，方法是将
DOMMatrix 对象直接传递给 setTransform()（即第二种类型），并在其上绘制一个圆圈。canvas {
border: 1px solid black;
}
JavaScript
注意：另请参阅
transform() 方法；它不会覆盖当前变换矩阵，而是将其与给定的矩阵相乘。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
规范
| css |
|---|
| 规范 # HTML 标准 |
浏览器兼容性
dom-context-2d-settransform-dev