javascript - キャンバスのセクションを(グリッドに基づいて)再描画する

javascript html canvas

「マップ」を生成するパーリンノイズがあります。
http://jsfiddle.net/rossc1/RKCdZ/(JSFiddleで動作するように更新-ありがとう@Ross)

私が本当に欲しいのは、「reddot」の周りのセクションのみを再描画することです(WASDを使用して移動します)。

技術的には機能しますが、オフセットが間違っていて、マップを間違って再描画します:(
私はこれとしばらく戦っています。あなたの助けを乾杯!

PS
エラーチェックがないという事実は無視してください:)

p.p.s
これは私が面倒を引き起こしているセクションです:

function updateMap() {
    //update display functions here

    for (x = yX-8; x <= yX+8; x++) {
        for (y = yY-8; y <= yY+8; y++) {

            if (x >= 0 && y >= 0 && x < mapSize && y < mapSize) {

                if (perlin[x][y] === 0) {
                    rect(7*(x),7*(y), 7, 7, '#6fb4db'); //water
                } else {
                    rect(7*(x),7*(y), 7, 7, 'rgb('+perlin[x][y]+','+ (perlin[x][y] + 50) +','+perlin[x][y]+')'); //land
                }

                if (x === yX && y === yY) {
                    rect(7*(x),7*(y), 7, 7, 'rgb(225,0,0)'); //you
                }

            }

        }
    }   
}
答え
まあ!なぜだか知っているよ。これは嫌いだよ。

ctx.rectctx.fillRectは同じものではありません! rectはパス専用で、fillRectはパスを使用しません。前の色のfillRectを使用してパスを作成し、完全に空のパスを閉じます!したがって、2つの変更のいずれかを行います。

    function rect(x,y,w,h,col) {
        ctx.beginPath();
        // rect and not fillRect!
        ctx.rect(x,y,w,h);
        if (col) {
            ctx.fillStyle = col;
        }
        //ctx.stroke();
        ctx.closePath();
        ctx.fill();
    }


または:

    function rect(x,y,w,h,col) {
        // set fillStyle BEFORE calling fillRect!
        if (col) {
            ctx.fillStyle = col;
        }
        ctx.fillRect(x,y,w,h);
    }


例:http://jsfiddle.net/RKCdZ/6/

言い換えれば、あなたの数学はずっと正しかったです!あなたはちょうど各正方形を前の色で塗りつぶしていました。
関連記事

javascript - Pythonを使用してGoogle App EngineにjQueryオートコンプリートを実装するにはどうすればよいですか?

javascript - 検索テキストボックスに基づいて行を表示/非表示

java - Java Scripting Engineクラスのインスタンス化

javascript - ScrollToスクリプトでスクロールするときにページのちらつき/途切れを防ぐ方法はありますか?

javascript - iframeを取得するための正しいJavaScript関数とは

javascript - JavaScriptでのXMLのクエリ

javascript - javascript:WebForm_DoPostBackWithOptionsをデバッグするにはどうすればよいですか?

javascript - Rhino JSインタープリターとSpiderMonkeyインタープリター-異なる戻り値

javascript - jQueryを使用して<head>からすべての<meta ..>を読み取るにはどうすればよいですか?

javascript - 私の最初のWebアプリケーションを構築するための優れたリソース(おそらく、純粋なHTML5 / Javascript / CSS3を使用するだけ)