HTMLキャンバスクリップ領域 - コンテキスト復元？

Question

アム すなわちのみ移動選手の後ろに描かれた背景には

EDITを再描画する必要が心を動かされない項目（背景画像、静的な項目など）の再描画を防ぐために、私のキャンバス上の「ダーティゾーン」を設定しようとしています：示唆したように、ここでの「更新」の方法がうまくいかないこと http://jsfiddle.net/7kbzj/3/

のjsfiddleですので、moveSprite（）を使用すると、基本的には、...「スプライトを移動する」リンクをクリックして実行して得ることができますクリックするたびにクリッピングゾーンが右に10ピクセルずつ移動する必要があります。クリッピングマスクは初期位置に留まり、再ペイントだけが発生します。奇妙なO_O

私は私のキャンバスを初期化として、背景がペイントされた後そう、私はctx.save（）メソッドを使用し：クリッピング作品を見るために

function init() { 
    canvas = document.getElementById('kCanvas'); 
    ctx = canvas.getContext('2d'); 

    ctx.fillStyle = "rgb(0,128,0)"; 
    ctx.fillRect (0,0,320,240); 

    ctx.save(); 

    setInterval(function() { update(); }, tpf); 
} 

を、私は別の色を描きます私は結果が悪いです...クリップされ、最初のクリッピング領域は青色の塗装されたかった面積:(

function update() { 
    setDirtyArea(x,y,w+1,h) 

    ctx.fillStyle = "rgb(0,0,128)"; 
    ctx.fillRect (0,0,320,240); 

    x++; 

    // paint image 
    ctx.clearRect(x,y,w,h); 
    ctx.drawImage(imageObj, x, y); 

}

function setDirtyArea(x,y,w,h) { 
    ctx.restore(); 
    // define new dirty zone 
    ctx.beginPath(); 
    ctx.rect(x, y, w, h); 
    ctx.clip(); 
} 

のバックグラウンド（青1） 0

私は青いゾーンが画面の右側に伝播するのを好きです...助けてください、私は何が間違っているのか理解していません！ ありがとう、 J.

Answer 1

実際の図面を囲み、保存と復元の方法でボックスのクリッピングする必要があります。 closePathメソッドをインクルードします。私はあなたがそれをしようとしていると信じているようにあなたのフィドルを修正しました。

http://jsfiddle.net/jaredwilli/7kbzj/7/

ctx.save(); // save the context 
    // define new dirty zone 
    ctx.beginPath(); 
     ctx.rect(x, y, w, h); 
     ctx.clip(); 

ctx.restore(); // restore the context 

私も保存と復元使用することは本当に複雑に得ることができることを学び、どの文脈あなたの内を知って混乱。それが取り組んでかなり巨大なキャンバスアプリイムを思い付いた、と私はしていますあなたのキャンバスコードをインデントすることが非常に助けになることを発見しました。特にセーブ/リストア。私はそれがベストプラクティスとみなされるべきであると判断したので、それをよく知っている人が増えています。

これが役に立ちます。