HTML5画布图像移动闪烁 [英] HTML5 Canvas Image Moving Flickering

问题描述

在画布中，有一个图像，它根据箭头键的事件移动。
但是它在firefox中闪烁，并且在chrome和ie上工作良好。

In canvas, there is a image, which moves on events of arrow keys. But it flickers in firefox and works fine on chrome and ie.

我不想要一个解决方案只清除画布的一部分，

I don't want a solution like to clear only the portion of canvas, because I have other things added in canvas too.

以下是我的代码：

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;
}

感谢大家。

推荐答案

这是我用缓存图片的意思：

This is what I meant with "caching the images":

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);
}

（作为代码的警告，按下的键，但最后一个在序列中上下 - 右 - 左总是赢其他人。这是真的你想要什么？）

(As an warning on your code, it seems that you want to handle multiple pressed keys, but the last one in the sequence up-down-right-left always "wins" over the others. Is that really what you want?)

这篇关于HTML5画布图像移动闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！