2

移動していないアイテム（背景画像、静止アイテムなど）の再描画を防ぐために、キャンバスに「ダーティゾーン」を設定しようとしています。つまり、移動しているプレーヤーの後ろに描画された背景のみを再描画する必要があります。

編集：提案されているように、これがそのjsfiddleです http://jsfiddle.net/7kbzj/3/

「update」メソッドはそこでは機能しないので、「movesprite」リンクをクリックして実行できるmoveSprite（）です...基本的に、クリッピングゾーンはクリックするたびに右に10px移動する必要があります。クリッピングマスクは初期位置に留まり、再ペイントのみが行われます。奇妙な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();
}

ブルーゾーンが画面の右側に向かって伝播するのを見てみたいです...助けてください、何が悪いのかわかりません！ありがとう、J。

4

1 に答える 1

5

ボックスの実際の描画とクリッピングをsaveメソッドとrestoreメソッドでラップする必要があります。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

また、保存と復元の使用は非常に複雑になり、どのコンテキストで作業しているかを知るのが混乱する可能性があることも学びました。非常に巨大なキャンバスアプリが動作していることがわかり、キャンバスコードをインデントすると非常に役立つことがわかりました。特に保存/復元。私はそれをベストプラクティスと見なすべきだとさえ決めたので、それを知っていて実行する人が多ければ多いほどよいでしょう。

お役に立てれば。

于 2011-11-16T03:43:52.320 に答える