我有一个使用 context.fillRect() 方法绘制图像的方法。我希望重复绘制该图像,即沿 x 和 y 轴以平铺格式绘制,因为它尺寸较小(长度为 15 像素)。
它是为了填充我的 Canvas ,宽度为 700 px,高度为 500 px。
这可以使用 context.createPattern() 方法来完成吗?怎么办?
最佳答案
使用 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);
关于javascript - 重复在 2D Canvas 上绘制图案的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13807961/