我正在做一个实验，试图在 HTML5 Canvas 中的帧速率开始下降之前提高最大粒子数。
我正在使用 requestAnimationFrame，我正在使用来自 Canvas 的 drawImage，因为这似乎是渲染图像的最快方法(在 jsPerf 上测试过)。
这里有一个可用的 jsFiddle:http://fiddle.jshell.net/bewYC/5/
您可能需要刷新或重新运行几次才能使其正常工作(不知道为什么，但它只是不想在第一个页面加载时运行。)
事实上，我的运行 Chrome 22 的计算机可以保持 60FPS 和大约 5,000 个粒子。在此之上的每一步，FPS 开始下降。如果我删除 drawImage() 并只计算粒子的位置，我的处理器不会达到最大值，直到超过 10 倍的粒子数。
我想知道的: 有没有比使用带有 drawImage 的循环渲染大量粒子(例如 40,000 个)更快的方法？我特别想了解有关 JavaScript/Canvas 的知识，但如果您只了解另一种语言(例如 Java 或 C#)，那么无论如何请分享。
最佳答案
对于这个问题，使用 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 .而且我不是图形编程的向导；我敢肯定，确切知道该怎么做的人可以进一步插入它。
(附注:链接可能很脆弱，因为我修改了 GLToy；如果您没有得到指定的效果，请告诉我，以便我修复链接。)
关于javascript - 最大化 HTML5 <canvas> 上粒子渲染的速度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13405063/