javascript - Canvas 矩形图像

Question

所以我开始使用 Canvas 工作，但我很难适应图层及其填充。

几个小时后，我设法使用基本颜色制作了简单的动画，但主要问题是当我想填充框数组时

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 & 右边框以提高效率，如果模式在每个框中重复多次，但这将是一个复杂的、容易出错的代码。