Question

我有一个使用context.fillRect（）方法绘制图像的方法。我想要重复绘制这个图像，即沿着x和y轴以平铺格式绘制，因为它的尺寸很小（长度为15个像素）。

填充我的画布，宽度为700像素，高度为500像素。

可以使用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。

Answer 2

根据您对apsillers回答的回复，我建议您将所需的模式绘制到另一个canvas元素。然后，您可以将完成的绘图传递给ctx.createPattern。

var drawing = document.createElement('canvas');

//Do necessary drawing
//ctx.fillRect(etc)

var ptrn = ctx.createPattern(drawing,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0, canvas.width,canvas.height);

HTML5 Canvas - Repeat Canvas Element as a Pattern

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

2 个答案: