在iPad2上用HTML5绘制粒子的最有效方法

Most efficient way to draw particles in HTML5 on iPad 2

本文关键字：有效 方法 粒子 绘制 iPad2 上用 HTML5      更新时间：2023-09-26

我正试图为一个针对iPad2的HTML5网站/应用程序创建带有轨迹的移动灯光。我想知道最好的方法是什么，使用HTML5是否可行。我选择HTML5是因为它比使用Objective C的原生iOS应用程序更容易、更便宜地开发和部署。当然，如果事实证明HTML5根本没有提供足够的性能，我可能不得不吞下苦果。

无论如何，为了给你一个印象，我在说什么，这就是我到目前为止得到的：

屏幕截图http://devdali.no-ip.org/mathias/test-lights/screenshots/1.jpg

或者你可以在这里看到它的作用（只适用于基于webkit的浏览器）。

起初，我尝试使用HTML5画布，并以类似于上面所示的方式将径向渐变绘制为粒子。它起作用了，但即使在我的台式电脑上，帧速率也很糟糕！

因此，经过一点阅读，我发现CSS3转换可能是硬件加速的，所以我构建了上面看到的版本。每个"粒子"都是一个64x64 png图像。对于每个灯光，都有一个"头"灯光（一个img），后面是由115个img元素组成的轨迹。每个img元素都使用"translate3d"（以及缩放和旋转）进行转换。每个元素的不透明度也是动态调整的。

这样做在我的电脑上提供了更好的帧速率，但我怀疑iPad2能否处理它

如果有人能给我一些关于如何提高总体性能和考虑目标平台的提示，我将不胜感激。

感谢您提前提供的帮助！

如果您接受效果的小更改，其他一些过程可能会很快工作：

  • 不要通过许多粒子绘制灯光的轨迹，只需在Canvas元素中的当前位置绘制灯光即可。

  • 然后，您可以在一帧开始时通过在顶部填充一个不透明度非常低的黑色矩形来使整个图像变暗。这样，轨迹会逐渐变暗，但不会像现在这样改变颜色。

  • 然而，绘图操作的数量将大大减少。最昂贵的操作是为每一帧填充渐变矩形。

这应该在画布中构建。看看EaselJS和这个演示。

http://easeljs.com/http://easeljs.com/demos/MusicVisualizer/index.html

您可以通过使用WebGL（，iPad2上支持）来优化性能LOT…正如Nison Maël所说，它不支持ios safari上的基本html页面。。。

目前，您只能将画布作为一种解决方案。这仍然会给你更好的表现。。。

（您可以查看此博客了解更多信息：http://learningwebgl.com/blog/

只要有一点信心和时间，你就会大吃一惊！）

相关文章：