如何在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）