我正在尝试为针对iPad 2的HTML5网站/应用创建带有轨迹的移动灯。 我想知道最好的方法是什么，以及使用HTML5是否可行。我之所以选择HTML5，是因为它比使用Objective C的本机iOS应用程序更容易，更便宜。当然，如果事实证明HTML5根本没有提供足够的性能，我可能不得不吞下苦药。
无论如何要给你一个我正在谈论的印象，这就是我到目前为止所得到的：
screenshot http://devdali.no-ip.org/mathias/test-lights/screenshots/1.jpg
或者您可以在行动here中看到它（仅适用于基于webkit的浏览器）。
首先，我尝试使用HTML5画布，并以与上面类似的方式绘制径向渐变作为粒子。它起作用了，但即使在我的台式电脑上，帧速率也很糟糕！
因此经过一些阅读后我发现CSS3转换可能是硬件加速的，所以我构建了你在上面看到的版本。每个“粒子”都是64x64 png图像。对于每个灯，都有“头”灯（一个img），然后是由115 img元素组成的轨迹。使用“translate3d”（以及缩放和旋转）转换每个img元素。此外，每个元素的不透明度也是动态调整的。
这样做可以在我的电脑上提供更好的帧率，但我怀疑iPad 2会处理它。
如果有人能给我一些关于如何提高整体性能并考虑目标平台的提示，我将不胜感激。
提前感谢您的帮助！
答案 0 :(得分：1)
如果您接受对效果的微小更改，其他一些程序可能会很快：
不是通过许多粒子绘制光线的轨迹，而是在Canvas元素中将光线绘制在当前位置。
然后，您可以通过在顶部填充具有非常低不透明度的黑色矩形来使整个图像变暗。这样，小径渐渐变暗，但不会像现在这样改变颜色。
然而，绘图操作量将大大减少。最昂贵的操作是填充每帧的渐变矩形。
答案 1 :(得分：0)
这应该在画布中构建。看看EaselJS和这个演示。
http://easeljs.com/ http://easeljs.com/demos/MusicVisualizer/index.html
答案 2 :(得分：0)
你可以使用WebGL（在iPad2上支持）来优化 LOT 的表现...... ios safari上的基本html页面不支持，如NisonMaël所述......
目前你只有画布作为解决方案。这仍然会给你更好的表现......
（您可以查看此博客了解更多信息： http://learningwebgl.com/blog/
只要有一点信心和时间，你就会感到惊讶！）
