html 5 canvas: 在游戏中使用绘制图像使循环非常慢

Question

我正在制作一个基于绘制图像的游戏，每隔一段时间就清除一次。我开始与：

var peng = new Image();

和然后:

  peng.onload = function() {
context.drawImage(peng, pengXPosition, pengYPosition, pengWidth, pengHight);
};

并在 循环中:

var i=0;
function pengMoveRight(){ i++;if(i==1){peng.src = 'images/1.png';}else if(i==2)
       {peng.src = 'images/2.png';} else if(i==3){peng.src = 'images/3.png';}else if(i==4){
        peng.src = 'images/4.png';}else if(i==5){peng.src = 'images/5.png';}else if(i==6){
        peng.src = 'images/6.png';i-=6;}}

当我运行它在 IE 上运行良好但在 chrome 和 mozilla 上它太慢并且字符即将消失.. 我使用了 setinterval();一次 window.requestAnimationFrame();一次和两者都会导致同样的问题。我应该怎么做才能让它顺利移动？这是完整的脚本 http://mark-tec.com/custom%20game/

Answer 1

不要更改源，而是尝试创建多个 Image 对象。这样，drawImage 调用始终可以使用 pre-loaded 图像。

Answer 2

您需要预加载所有图片或使用sprite方式（所有图片打包成一个sprite），以避免图片只在需要时才加载造成的初始延迟。

但是，在出现最初的问题之后，一旦所有图像都被缓存，您的示例应该运行正常。

html 5 canvas: 在游戏中使用绘制图像使循环非常慢

html 5 canvas: using draw image in game makes loop very slow

html

javascript

canvas

html5-canvas