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