IOS HTML Canvas or CSS3 3D Transforms

本文关键字：3D Transforms CSS3 or HTML Canvas IOS 更新时间：2023-09-26

在IOS平台上：

HTML5 canvas 元素不是硬件加速的。CSS3 3D 变换（例如：translate3d）是硬件加速的。

想要使用HTML/JavaScript和PhoneGap为IOS创建一个2D游戏，我应该考虑只使用带有CSS3的DOM？

有人试过这个吗？有基准吗？

我在构建自己的2D游戏时也有这种担忧。我最初在iOS上的动画性能方面遇到了问题，但我用CSS3 3D转换解决了这个问题。我没有尝试 Canvas，但一旦应用了正确的 CSS，我真的不需要。PhoneGap在iOS和Android版本的性能仍然很好。一些较旧的Android设备有点慢，但我认为Canvas也无济于事。

至于基准测试，我确实发现它显示了带有图像的 Canvas 和 CSS3 过渡：http://www.spielzeugz.de/html5/compare/

接受的答案实际上具有极大的误导性，问题的某些部分也是如此。直截了当：

iOS 5及更高版本实际上确实为Canvas使用了硬件加速。
画布的设计一点也不好。仅当您应用转换时，硬件加速才会启动。如果您清除并重绘，即使使用 requestAnimationFrame，您的性能仍然可能非常不稳定。你肯定会注意到差异。
CSS3 转换可能会产生更好的性能 - 对于 Android 设备。

我做了一个尝试，但失去了兴趣。这似乎和我用画布做同样的事情一样有效。你不会注意到太大的差异，除非你正在做繁重的javascript计算，无论你使用CSS3还是canvas，你都可能会这样做。

我不知道任何基准，但你可以在这里阅读：http://www.sencha.com/blog/apple-ios-5-html5-developer-scorecard/

这也取决于您正在谈论的设备。它们都运行不同的硬件和略有不同的软件，因此应该会影响您的决定：http://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html

Canvas的设计非常好，在某种程度上，无论你是否硬件加速它都不会有太大区别，特别是如果你只是在做2D的东西。