HTML5：Canvas在低端计算机上执行速度太慢 [英] HTML5: Canvas performs too slow on lower end computers

问题描述

我的问题是，我的JavaScript /画布在低端计算机上执行得很慢（即使他们可以运行更具挑战性的 canvas 脚本顺利）。
我试图根据用户的选择做一个简单的动画。

My problem is that my javascript/canvas performs very slowly on lower end computers (Even though they can run even more challenging canvas scripts smoothly). I'm trying to do a simple animation depending on user selection.

在画布上绘制直接证明是太慢，我画上一个隐藏画布并将所有框架（ getImageData ）保存到 data ，然后调用 animate 绘制在我的真实画布上。

When drawing on the canvas directly proved to be too slow, I draw on a hidden canvas and saved all frames (getImageData) to data and then called animate(1); to draw on my real canvas.

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

但是，这太慢了。我该怎么办？

But even this is too slow. What do I do?

推荐答案

1. 不要使用 putImageData 如果你能帮助它。 FF3.6 的性能非常糟糕：
   
   
   
   使用绘制命令在屏幕画布和blit精灵到子区域使用 drawImage

1. Do not use putImageData if you can help it. The performance on FF3.6 is abysmal:
   
   Use drawing commands on off-screen canvases and blit sprites to sub-regions using drawImage instead.

如@MartinJespersen所述，重写框架绘制循环：

As mentioned by @MartinJespersen, rewrite your frame drawing loop:

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

如果您使用的库强制 clearRect 每一帧，但你不需要，停止使用该库。

If you're using a library that forces a clearRect every frame, but you don't need that, stop using that library. Clear and redraw only the portions you need.

使用较小的画布大小。

Use a smaller canvas size. If you find it sufficient, you could even scale it up using CSS.

接受慢的电脑慢，你站在一个伟大的肩膀上许多抽象层。如果你想看看低端计算机的性能，用C ++和OpenGL编写。否则，请设置最低系统要求。

Accept that slow computers are slow, and you are standing on the shoulders of a great many abstraction layers. If you want to eek out performance for low-end computers, write in C++ and OpenGL. Otherwise, set minimum system requirements.

这篇关于HTML5：Canvas在低端计算机上执行速度太慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！