HTML5:Canvas在低端计算机上执行速度太慢

Question

我的问题是我的javascript/canvas在低端计算机上执行速度非常慢(即使它们可以顺利运行更具挑战性的画布 脚本).我正在尝试根据用户选择做一个简单的动画.

当直接在画布上绘图被证明太慢时,我在隐藏的画布上绘制并保存所有的框架(getImageData)data然后调用animate(1);以在我的真实画布上绘制.

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

但即便这样也太慢了.我该怎么办？

Answer 1

1. putImageData如果你能提供帮助,请不要使用.FF3.6上的性能非常糟糕:
   测试结果显示getImageData性能不佳http://phrogz.net/tmp/canvas_copy_benchmark.png
   在屏幕外画布上使用绘图命令,而使用blit sprite到子区域drawImage.

2. 正如@MartinJespersen所提到的,重写你的框架绘图循环:

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

3. 如果您使用的库强制clearRect每个帧,但您不需要,请停止使用该库.仅清除和重绘您需要的部分.

4. 使用较小的画布大小.如果你发现它足够了,你甚至可以使用CSS扩展它.

5. 接受缓慢的计算机是慢的,你站在许多抽象层的肩膀上.如果您想要了解低端计算机的性能,请使用C++和OpenGL编写.否则,设置最低系统要求.