javascript - HTML5 Canvas 图像移动闪烁

Question

在 Canvas 中，有一个图像，它会随着箭头键的事件而移动。但它在 Firefox 中闪烁，在 chrome 和 ie 上运行良好。

我不想要像仅清除 Canvas 部分这样的解决方案，因为我还在 Canvas 中添加了其他内容。

下面是我的代码:

var
velY = 0,
velX = 0,
speed = 2,
friction = 0.90,
keys = [],

canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
playerDirection="img/player/player_back.png";

function update() {

    if (keys[38]) {
        if (velY > -speed) {
            velY--;
            playerDirection="img/player/player_back.png";
        }
    }

    if (keys[40]) {
        if (velY < speed) {
            velY++;
            playerDirection="img/player/player_front.png";
        }
    }
    if (keys[39]) {
        if (velX < speed) {
            velX++;
            playerDirection="img/player/player_right.png";
        }
    }
    if (keys[37]) {
        if (velX > -speed) {
            velX--;
            playerDirection="img/player/player_left.png";
        }
    }

    velY *= friction;
    y += velY;
    velX *= friction;
    x += velX;

    if (x >= canvas.width - player.width) {
        x = canvas.width - player.width;
    } else if (x <= 5) {
        x = 5;
    }

    if (y > canvas.height - player.height) {
        y = canvas.height - player.height;
    } else if (y <= 5) {
        y = 5;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    playerObj = new Image();
    playerObj.onload = function()
    {
        ctx.drawImage(playerObj, x, y);
    };
    playerObj.src = playerDirection;


}

update();


function handlerKeyDown(e)
{
    keys[e.keyCode] = true;
}

function handlerKeyUp(e) {
    keys[e.keyCode] = false;
}

提前致谢。

Answer 1

这就是我所说的“缓存图像”的意思:

var images = {}; // This will contain the Image objects
// Other definitions...

function update() {

    if (keys[38]) {
        if (!images.back) {
            // The image object hasn't been defined yet.
            images.back = new Image();
            images.back.src = "img/player/player_back.png";
        }
        playerObj = images.back;
    }
    // Other checks on the pressed keys
    // ...

    // Computations on the position...

    if (!playerObj.naturalWidth) {
        // If naturalWidth/Height is 0, then the image hasn't been loaded yet.
        // We update the onload listener to draw in the right position.
        playerObj.onload = function() {
            ctx.drawImage(playerObj, x, y);
        };
    // The image has already been loaded, so we just draw it
    } else ctx.drawImage(playerObj, x, y);
}

(作为对您的代码的警告，您似乎想要处理多个按下的键，但上-下-右-左序列中的最后一个总是“胜过”其他键。这真的是您想要的吗？)