Question

我有一些perlin噪音产生“地图”： http://jsfiddle.net/rossc1/RKCdZ/（已更新为JSFiddle工作 - 感谢@Ross）

我真正想要的是只重绘“reddot”周围的部分（使用WASD移动）。

从技术上讲，它可以正常工作，但错误的偏移并重绘地图错误:( 我已经和它争斗了一段时间。干杯，为你提供帮助！

P.S。忽略没有错误检查的事实：）

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
                }

            }

        }
    }   
}

Answer 1

亲爱的，亲爱的！我知道为什么。你会讨厌这个。

ctx.rect和ctx.fillRect不是一回事！ rect仅适用于路径，fillRect不使用路径。您正在使用带有之前颜色的fillRect创建路径，然后关闭完全空的路径！因此，请进行以下两项更改之一：

    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/

换句话说，你的数学一直都是正确的！你只是用前一种颜色填充每个方块。

重绘一段画布（基于网格）

1 个答案: