HTML5游戏，canvas还是div？

Question

我计划使用JavaScript创建一个实时多人平台游戏，游戏是基于HTML5的。在网络上搜索了4个小时后，我没有找到最新的答案：DOM渲染我的游戏是否比在画布内渲染更快？这个游戏将占据整个文档，在地图上有2/4个玩家会跳跃，相互射击，炸弹也会爆炸。那么，到底该采用哪种方式呢？我记得两年前我用DOM制作了绘图应用，并且运行得相当流畅，但现在画布速度是否更快呢？谢谢大家。

附注：我还考虑使用Dart。

- Romeo

---

大多数现代JavaScript（或Dart）游戏都是在画布中呈现的。Dart也有一些库（我几乎可以确定）用于高级画布程序。看看一些Dart示例项目或Dart包管理器[Pub]（http://pub.dartlang.org），你应该很快就能找到一些东西来帮助你入门。 - beakr

大多数最新的浏览器都有硬件加速的canvas。实际表现仍取决于浏览器。您还可以将解决方案网格化，同时使用canvas和DOM渲染。但是，canvas将在渲染更复杂的游戏时显示其美丽（如粒子、阴影、转换等）。 - Gustavo Carvalho

如果你选择使用Dart，请查看http://dartgamedevs.org获取大量信息和代码。 - Seth Ladd

Answer 1

我使用canvas，我建议您也采用它，因为它是一种直接绘制模式。然而，您应该确保尽可能将其强制设置为硬件加速。您可以通过将元素的样式设置为transform:translateZ(0);（或不同浏览器对此的解释，例如 -webkit-transform:translateZ(0);）来实现这一点。随着canvas越来越接近本地代码，操纵DOM可能会变得很慢，特别是使用简单方法以尽可能提高性能。

我的游戏在不同平台上表现良好 - 并非在每个平台上都普遍良好（旧版Android操作系统滞后，但其JS和浏览器渲染引擎本来就不快），但在许多平台上都表现良好。

- Marc Marta

Answer 2

“Canvas是您所描述的游戏类型的最佳选择，但即使使用canvas，一些DOM元素仍然非常有用，例如询问玩家的姓名，或在游戏中创建菜单或个人资料部分。当您需要显示DOM元素时，可以在画布上方以绝对位置渲染一个div，并在canvas元素中执行所有“游戏操作”，例如绘制和动画精灵。”

“Canvas是最佳选择的原因很简单。我非常确定，如果没有canvas元素，做这样的事情会非常困难。”

http://galloman.github.io/ss2d/samples/skeletons2.html

更多信息请见：

http://ss2d.wordpress.com/support/

- Gallo

---

欢迎来到SO！尽量避免主观陈述（例如“我很确定”），而是尽可能提供带有参考资料的事实信息。干杯！ - butch