画布矩形图像

Question

所以我开始使用画布，我有一个习惯图层和填充的问题。

几个小时后，我设法让使用基本颜色简单的动画，但主要的问题是，当我想填补盒阵列

var boxes = []; 
boxes.push({ 
    x: 50, 
    y: 200, 
    width: 100, 
    height: 100 
}); 

含模式坐标和参数。

var pat = ctx.createPattern(ground_block_200_80,'repeat'); 

使从箱阵列矩形我使用

ctx.fillStyle = pat; 
    ctx.fillRect(boxes[0].x, boxes[0].y, boxes[0].width, boxes[0].height); 

它填满整个层的起始从X = 0和Y = 0，但我想从矩形

的左上角开始百通

是否有可能以某种方式移动图层或调整图案？

Answer 1

开箱即用，没有广泛的方法将图案调整到特定的偏移量。有一个setTransform method defined in the standard但支持very scarce。

您的最佳选择可能不是使用模式，而是依赖于drawImage()。

注：你可以结合使用您的矩形的“左上”区域的模式，并利用周围的底部&右边界drawImage效率，如果模式重复每个盒子里很多次，但它将是一个复杂的，容易出错的代码。