javascript - 重复在 2D Canvas 上绘制图案的方法

Question

我有一个使用 context.fillRect() 方法绘制图像的方法。我希望重复绘制该图像，即沿 x 和 y 轴以平铺格式绘制，因为它尺寸较小(长度为 15 像素)。

它是为了填充我的 Canvas ，宽度为 700 px，高度为 500 px。

这可以使用 context.createPattern() 方法来完成吗？怎么办？

Answer 1

使用 context.createPattern 的秘诀是 context.fillStyle 属性。

首先，创建图案，然后将图案分配给 context.fillStyle，最后，使用 context.fillRect 绘制图案:

// assuming img is loaded...
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0, canvas.width,canvas.height);

有一个complete example on MDN .