在构建基于浏览器的游戏时要画布还是不画布？

背景：我具有广泛的开发背景，但是我上一次编写游戏的代码是在多年前。我的Javascript技能非常有限，我打算通过构建一个简单的游戏（俄罗斯方块，吃豆人或类似复杂程度的东西）来改进它们。

问题：在我看来，我需要做出的基本选择是是否应该对<canvas>元素进行渲染。

使用画布，我拥有用于​​渲染点，线和更复杂物体的基本工具。大概有或将会有各种框架来帮助实现这一目标。

没有画布，我可以将对象保留在DOM树中，就像普通的网页一样，只是非常复杂，并且具有许多重叠的元素。

一种方法比另一种更好吗？它们相互排斥吗？我怎么知道该选哪个？

尽管Canvas和DOM是相当独立的，但它们并不相互排斥。一种好的方法是使用“画布”渲染主游戏区域（例如，“俄罗斯方块”中的掉落碎片），并使用与画布元素重叠的DOM元素进行所有UI（例如，得分显示）。

话虽如此，对于像《俄罗斯方块》这样的原始游戏来说，这种方法并不是必需的。Canvas对于更高级的图形效果很有用，但是如果不需要这些效果，那么坚持使用DOM将为您提供更大的兼容性。并非所有浏览器都支持HTML5 Canvas。

关于DOM
DOM对于老式2D效果很好，这意味着不使用图像旋转或缩放。实际上，这两种工作都有工具，但是您不能指望它们表现出色。

对于游戏，您应该尽可能少地依赖浏览器布局引擎，这意味着position:absolute可以放置对象。尽量不要一直创建和销毁DOM对象，如果需要大量可变的对象，则可能需要将一组空闲的DOM元素设置为display:none，以便在需要时可以恢复。

DOM vs画布
随着IE8的市场份额的不断缩小，画布正变得越来越有吸引力，对于大多数游戏而言，它可能是一个不错的选择。但是对于某些作业，DOM是更易于使用的工具，您可以根据需要使用一些文档流，可以直接捕获渲染对象的点击，集成滚动条也很容易。

很难掩盖性能差异，它取决于工作，并且会因浏览器而异。

完全取决于游戏的类型，尽管画布适合其中的“大多数”游戏。

DOM管理在某个时刻变得可怕，越慢的元素越多，围绕“极慢”的元素越多。

使用IMG元素管理资产加载顺序是非常规的（图像标签：D上故意破坏的协议的拦截错误）。

虽然，对于大多数静态图像和低效果数的游戏，我还是会选择DOM。画布是所有其他东西的首选（指向点和单击的东西，尽管命中图是另外一个故事）。

如今，Canvas是如此之快（即使在iPhone上也是如此），几乎没有任何理由不使用它。

如果您要制作HTML5游戏，那么画布要好得多。原因如下：

1. 速度-将画布视为图像。您绘制图像，然后它忘记了您绘制的内容。与DOM或SVG相比，这极大​​地提高了性能。DOM和SVG应用程序的作用是跟踪您放置在屏幕上的每个对象。这意味着，如果您在屏幕上拥有很多物体，尤其是离屏或隐藏的物体，则无论如何它们都会被绘制并保持跟踪。
2. 绘图功能-尽管DOM元素具有强大的CSS3转换，但是与画布的功能相比，这算是什么。画布可以绘制任何对象，具有强大的渐变支持，用于以3D形式显示对象的插件，滤镜等。
3. 支持-使用DOM时，如果要使用诸如转换或动画之类的实验性功能，则必须在CSS中使用-moz-，-webkit-，-o-和-ms-前缀。在画布中，您不必为此担心。只需使用一个函数进行绘制即可完成。画布与支持相关的另一个优点是应用程序的显示方式。作为网站开发人员，浏览器之间缺乏DOM标准化使我发疯。尽管有详细的W3C规范，背景，渐变，变换等在浏览器之间的显示方式也有所不同。在画布中，我只遇到了可能不同的一件事-背景。当显示平铺的背景时，某些浏览器会将“ tile-x”作为平铺的中心在x轴上的0px处，而另一些浏览器会将平铺的瓷砖向下平放。
4. 库和文档-有关使用画布制作游戏的文档，其中有大量的库。一些库：CreateJS，paper.js，fabric.js，KineticJS，libCanvas，Processing.js，PlotKit，Rekapi，PhiloGL，InfoViz Toolkit，Frame-Engine，CAKE，Raphaeljs，Tweenjs等。我可以列举很多，但是毫无意义。

缺点-动画-虽然有很多很棒的动画库，但我喜欢CSS3动画。它们是如此易于创建，操纵和触发。有各种各样的技巧可以使CSS3动画与画布上的对象一起工作，但是我怀疑大多数人都不想使用该方法。

祝您比赛顺利，我希望看到您的成就！

如果您考虑针对移动浏览器（尤其是Android），并且游戏中包含任何动态图形，请避免使用DOM动画。即使是Webkit，Android中的常规浏览器也没有用。在开始之前，请查看以下Android问题线程：“在Browser和WebView中糟糕地渲染CSS3和Javascript动画”。

Canvas本身可能没有更快的速度，但是有一些框架可以调用画布动画的硬件加速，例如CocoonJS。该站点上有一个视频链接，显示了使用该框架可以实现的性能提升（但是由于某些原因，我不允许发布两个以上的链接）。

简单的答案：具有画布后备功能的WebGL。

详尽的答案：如果您的游戏中包含大量文本，请覆盖HTML文本层。Pixi.js是一个经过战斗改进的显示框架，其中包含一些有用的附加功能，可以很好地实现这一目标。

记住DOM代表 文档对象模型。您将只想在非常罕见的情况下使用它来制作游戏，而在大多数情况下更喜欢使用画布。

即使您的游戏对图形的要求很小，但在DOM中进行操作也会产生不良的性能；除了俄罗斯方块，其他任何事情都可能会运行不佳。

我有一个真实的例子：创建Conway的《人生游戏》的实现时，我首先使用500x500的表格，更改了单元格的背景颜色。在此版本中，滑翔机运行速度不超过30 fps，较大的模式导致的滑行速度几乎不超过1。在我的游戏的画布版本中，现在可以平滑地运行更大的模式（人口1000以上）约30 fps。

同样，对于SVG（可伸缩矢量图形）也应该如此，尽管我从未在实践中尝试过。

编辑：我不得不承认我的例子不是很好（因为表=坏）。但是要点仍然是正确的：DOM操作是针对文档的。当您处理元素时，浏览器必须查找CSS并分配更多内存。比画布更快没有任何意义。