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

あなたは今の（x、yから開始します

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

パターンにウォール更新機能を変更することができます）、キャンバスの（0,0）ではありません