HTML5画布图像移动闪烁

在画布中，有一个图像，它在箭头键的事件上移动。但它在Firefox中闪烁，并在Chrome和IE上正常工作。HTML5画布图像移动闪烁

我不想要一个解决方案，只清除画布的一部分，因为我还在画布上添加了其他东西。

下面是我的代码：

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

感谢adavance。

来源

2014-09-19 Ashok Shah

您每次更新都会加载图像？你为什么不缓存它们？这可能有帮助。 – MaxArt 2014-09-19 09:53:33

我想通了，在Firefox的画布图像不要从缓存中加载。任何想法如何从缓存加载图像？ – 2014-09-19 09:54:54

不，你不能真正控制从Javascript。 *但是*您可以将'Image'对象存储在一个数组中。 – MaxArt 2014-09-19 09:59:17

这就是我的意思与“缓存图像”：

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

（如在你的代码的警告，似乎要处理多个按键，但最后一个序列起来向下 - 右 - 左总是“胜过”其他人。是否真的是你想要的？）

来源

2014-09-19 12:30:05 MaxArt

HTML5画布图像移动闪烁

回答

相关问题