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

我有一种使用context.fillRect（）方法绘制图像的方法。我想要这个图像被重复绘制，即沿着x和y轴的平铺格式，因为它的大小很小（15个像素的长度）。重复在2D画布上绘制图案的方法

这是填补我的画布700像素宽度，500像素的高度。

这可以使用context.createPattern（）方法来完成吗？怎么样？

2012-12-10 Michael Nyarach

https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Applying_styles_and_colors#A_createPattern_example – apsillers

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

来源

2012-12-10 19:51:53 apsillers

我明白这一点，但我不使用的图像。相反，我绘制了各种矩形（ctx.fillRect（）），最终生成一个“图像”。因为这个图像的意图是小的，我希望它可以绘制数百次来填充700 * 500px的整个画布。 http://jsfiddle.net/EP794/42/ –

根据您对apsillers的回答，我建议您将所需的图案绘制到另一个画布元素。然后您可以将完成的图纸传递给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

来源

2014-01-11 04:23:52 JoshuaOne

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

回答

相关问题