CanvasPattern: setTransform() 方法
注意：此功能在 Web Workers 中可用。
CanvasPattern.setTransform() 方法使用 DOMMatrix 对象作为图案的变换矩阵，并将其应用到该图案上。
语法
js
setTransform(matrix)
参数
返回值
无（undefined）。
示例
使用 setTransform 方法
这是一个代码片段，它使用 setTransform 方法，从 DOMMatrix 创建一个具有指定图案变换的 CanvasPattern。如果您将其设置为当前的 fillStyle，然后使用 fillRect() 方法在画布上绘制，该图案就会被应用。
html
<canvas id="canvas"></canvas>
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);
const img = new Image();
img.src = "canvas_create_pattern.png";
img.onload = () => {
const pattern = ctx.createPattern(img, "repeat");
pattern.setTransform(matrix.rotate(-45).scale(1.5));
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 400, 400);
};
规范
| 规范 |
|---|
| HTML # dom-canvaspattern-settransform-dev |
浏览器兼容性
加载中…
另见
- 定义此方法的接口：
CanvasPattern DOMMatrix