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