javascript - HTML5 : Canvas performs too slow on lower end computers

Question

我的问题是我的 javascript/canvas 在低端计算机上执行得非常慢(尽管它们可以运行更具挑战性的 canvas scripts 平稳)。我正在尝试根据用户选择制作一个简单的动画。

当直接在 Canvas 上绘制被证明太慢时，我在一个隐藏的 Canvas 上绘制并将所有帧(getImageData)保存到data，然后调用 animate(1); 在我的真实 Canvas 上绘制。

function animate(i){
    if(i < 12){
        ctx2.putImageData(data[i], 0, 0);
        setTimeout(function(){animate(i+1)},1);
    }
}

但即使这样也太慢了。我该怎么办？

Answer 1

1. 如果可以，请不要使用 putImageData。在 FF3.6 上的表现 is abysmal :
   
   _{(来源:phrogz.net)}

在屏幕外的 Canvas 上使用绘图命令，并使用 drawImage 将 Sprite blit 到子区域。

1. 如@MartinJespersen 所述，重写您的框架绘制循环:

   var animate = function(){
     // ...
     setTimeout(animate,30); //Max out around 30fps
   };
   animate();
   

2. 如果您使用的库强制每帧执行 clearRect，但您不需要它，请停止使用该库。清除并仅重绘您需要的部分。

3. 使用较小的 Canvas 尺寸。如果您觉得足够了，您甚至可以使用 CSS 对其进行扩展。

4. 承认慢速计算机很慢，并且您站在许多抽象层的肩膀上。如果您想为低端计算机争取性能，请使用 C++ 和 OpenGL 编写。否则，设置最低系统要求。