如何在 html5 画布上绘制移动的重复图案

Question

我有一面墙，它在 HTML5 画布上绘制在屏幕上从右到左移动。我正在使用砖块图像的重复图案，使其看起来像整面墙都被砖块覆盖。

以下是创建和填充模式的相关代码：

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

您可以将墙更新功能更改为

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();
};

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