如何在JavaScript画布填充样式中转换图像模式？

我目前正在用JavaScript开发一个2D图形库，现在我坚持解决背景纹理转换问题

我想将画布上下文（

CanvasRenderingContext2D

）的背景纹理（属性

fillStyle

）设置为图像（

CanvasPattern

）。 将图像分配给

fillStyle

很容易。 但唯一的问题是，图像实际上无法平移、缩放或扭曲

我查过MDN，它说有一个原型叫做

setTransform（）

。 使用此API，您可以通过

SVGMatrix

转换图像，这似乎有点烦人。 你不仅需要创建一个冗余的

元素，它还是一个实验性的API，在Google Chrome中无法工作

用常规的方法是不可能解决的。

---

有什么“黑客”方法可以做到这一点吗？

在CanvasRenderingContext2D上设置转换，而不是在CanvasPattern上。这是更好的支持，您不需要SVGMatrix对象

生成的绘制区域是经过变换的区域，因此只有当您希望整个画布具有统一的图案时，这可能才有用

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
img.src=https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload=函数（）{
var pattern=ctx.createPattern（img，“repeat”）；
ctx.fillStyle=图案；
ctx.setTransform（0.8,0.3,0,0.8,0,0）
fillRect（0，-172450700）；//确保覆盖了整个画布
};
首先绘制路径，然后设置变换。变换填充时，路径保持不变

该示例在两个框内旋转图案


const ctx=canvas.getContext（'2d'）；
var模式；
const img=新图像（）；
img.src=https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload=（）=>pattern=ctx.createPattern（img，“repeat”）；
requestAnimationFrame（主循环）；
函数主循环（时间）{
setTransform（1,0,0,1,0,0）；
clearRect（0,0，canvas.width，canvas.height）；
ctx.fillStyle=图案；
ctx.beginPath（）；
setTransform（1,0,0,1,0,0）；
ctx.rect（100100200200）；//为矩形创建路径
setTransform（1,0,0,1300200）；//设置图案的变换
ctx.旋转（时间/1000）；
ctx.fill（）；
ctx.beginPath（）；
setTransform（1,0,0,1,0,0）；
ctx.rect（150,0100400）；//为矩形创建路径
setTransform（0.2,0,0,0.2150200）；//为模式设置变换
ctx.旋转（-time/1000）；
ctx.fill（）；
requestAnimationFrame（主循环）；
}
您可以单独使用变换来变换填充，不依赖于路径，先创建路径，然后在创建路径后将变换设置为图案所需的值，然后再填充。。例如
ctx.beginPath（）；ctx.rect（0，0，ctx.canvas.width，ctx.canvas.height）；ctx，旋转（1）；ctx.fillStyle=图案；ctx.fill（）