HTML5 游戏、画布还是 div？

Posted 2023-03-05

【中文标题】HTML5 游戏、画布还是 div？

【英文标题】：HTML5 Game, canvas or div?

【发布时间】：2013-06-08 23:39:40

【问题描述】：

我正计划使用 javascript 在 html5 中创建一个实时多人平台游戏。在网上搜索了大约 4 个小时后，我找不到关于永恒问题的最新答案：使用 DOM 渲染我的游戏会比在画布中渲染它更快吗？游戏将是整个文档。 2/4 玩家将在地图上跳跃并互相射击，炸弹会爆炸。所以？会是什么。我记得我在 2 年前用 DOM 制作了一个绘图应用程序，它工作得还算顺利，但我猜现在画布的速度会更好？谢谢各位。

附：我也想用 Dart。

【问题讨论】：

大多数现代 Javascript（或 Dart）游戏都在画布中呈现。 Dart 也有一些用于高级画布程序的库（我几乎可以肯定）。看看一些 Dart 示例项目或 Dart 包管理器Pub，您应该很快就能找到一些东西来帮助您入门。

大多数最新的浏览器都有硬件加速画布。实际性能仍然取决于浏览器。您还可以使用画布和 DOM 渲染对解决方案进行网格划分。但是画布会显示出它的美丽，因为游戏在渲染（如粒子、阴影、变换等）方面更加复杂。

如果您选择使用 Dart，请查看 dartgamedevs.org 获取大量信息和代码。

【参考方案1】：

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

Canvas 是最佳选择的原因很简单。我很确定如果没有 canvas 元素，你不能或者真的很难做这样的事情：

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

更多信息：http://ss2d.wordpress.com/support/

【讨论】：

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

【参考方案2】：

我使用画布，并且会说这样做，因为它是直接绘图模式。但是，您绝对应该确保尽可能将其强制进行硬件加速。为此，您可以将 <canvas> 元素的样式设置为 transform:translateZ(0);（或不同的浏览器解释，例如 -webkit-transform:translateZ(0);）。由于画布越来越接近原生代码，因此操作 DOM 可能会很慢，尤其是使用简单的方法来获得最大性能。

我的游戏似乎在不同的平台上都表现不错 - 并不是在每个平台上都普遍表现良好（旧的 android 操作系统滞后，但他们的 JS 和浏览器渲染引擎一开始并没有那么快），但在每个平台上都很好很多平台。