javascript - 如何在 html5 Canvas 上绘制移动的重复图案

Question

我有一面墙在屏幕上从右向左移动，它是在 HTML5 Canvas 上绘制的。我正在使用砖 block 图像的重复图案，让它看起来像是整面墙都被砖 block 覆盖了。

下面是创建和填充模式的相关代码:

this.update = function() {
    var context = gCanvas.context;
    context.fillStyle = context.createPattern(this.image, "repeat");
    context.fillRect(this.x, this.y, this.width, this.height);
};

墙壁从右向左移动，但图案并没有随之移动，这使得图案看起来像是静态图像，墙壁在它上面滚动。我需要的是让图案跟随墙壁，让整个墙壁看起来像是从右向左移动。

请查看以下 jsfiddle 以查看实际操作:

https://jsfiddle.net/ugmo1cd3/4/

Answer 1

你可以把Wall更新函数改成

this.update = function() {
    var context = gCanvas.context;
    context.fillStyle = context.createPattern(this.image, "repeat");
    context.save();
    context.translate(this.x, this.y);
    context.fillRect(0, 0, this.width, this.height);
    context.restore();
};

图案现在将从 Canvas 的 (x,y) 而不是 (0,0) 开始