我正在做一个实验，试图在HTML5 Canvas中帧速率开始下降之前改善最大粒子数。
我正在使用requestAnimationFrame，我正在使用画布中的drawImage，因为这似乎是渲染图像的最快方法（在jsPerf上测试过）。
这里有一个有效的jsFiddle：http://fiddle.jshell.net/bewYC/5/
您可能需要刷新或重新运行几次才能使其正常工作（不知道为什么，但它只是不想在第一页加载时运行。）
按原样，运行Chrome 22的计算机可以保持60FPS，大约有5,000个粒子。随着每一步，FPS开始下降。如果我删除drawImage（）并只计算粒子的位置，我的处理器不会超过10倍的粒子。
我想知道的是什么： 是否有更快的方法来渲染大量的粒子（例如40,000），而不是使用带有drawImage的循环？我特别想知道关于JavaScript / Canvas的内容，但如果您只了解Java或C＃等其他语言，那么请分享。
答案 0 :(得分：8)
对于这个问题，使用WebGL（或适用于您的平台的其他“3D”API）几乎总是最好的方法。在移动位置合成大量图像（“纹理”，而不是）正是图形硬件设计的好处。现代浏览器确实使用GPU加速来执行2D-Canvas绘图操作，但仍然有JavaScript请求绘制每个单独的图像，这就是问题所在。
我建议您查看WebGL - 对于像粒子系统这样的简单事情，它根本不难编程，并且您可以轻松渲染数千个粒子。您的JavaScript只提供一个包含所有粒子位置的数组。
一种先进的技术是将粒子的模拟也放在GPU上，因此根本不需要JavaScript来执行每粒子。我自己在GLToy编写了一个GPU粒子模拟器。 Here it's configured for 80,000 particles并且在我的笔记本电脑上实现了60 FPS。实际上，该特定配置的限制是光滑颗粒的填充率;如果我们只使用积分，我可以将它推到300,000 particles。而且我不是图形编程的向导;我确信知道该做什么的人可以进一步推动它。
（P.S。链接可能很脆弱，因为我修改了GLToy;如果你没有得到命名的效果，请告诉我，以便我可以修复链接。）