JavaScript游戏开发中，Canvas和DOM有什么优缺点？

Question

在使用“纯”DOM创建游戏和使用canvas创建游戏之间，有哪些优缺点？

- budzor

---

不要使用它们中的任何一个。请使用Flash或原生开发。浏览器不是游戏引擎，也永远不会成为游戏引擎。 - Andy Ray

此外，没有很好的方法来制作音效。在我的经验中，Unity拥有一个网络播放器，工作得非常好。 - Deestan

Answer 1

画布(canvas) 优点:

1. 可以处理像素并应用滤镜效果，因此易于进行图像处理；
2. 对于游戏中的大量小元素非常高效；
3. 许多游戏库都可以使用canvas找到，例如box2dweb，并且可以制作出很棒的游戏，如愤怒的小鸟。

缺点:

1. 它是无状态的，因此必须记录画布中元素的状态，并自己处理命中测试；
2. 对于游戏中只有少量元素但非常大的场景不太有效率；
3. 绘制的自由性带来了所有绘图工作的责任。幸运的是，有许多库可以使用，例如cocos2d-html5、IvanK。

文档对象模型(DOM) 优点:

1. 由浏览器渲染，因此较少出错；

缺点:

1. 只能通过CSS进行简单动画，这使得游戏不够流畅；
2. 不适合操作数百个DOM元素；

- tristan

---

时代已经改变，浏览器布局引擎变得更快，JS可以做CSS无法完成的复杂动画。此外，通过适当的编程，DOM可以处理游戏。如果你喜欢这种东西，你还可以为物理引擎编写一个DOM渲染器的脚本。 - Technohacker

@K3v1n，真正的问题是为什么不用画布？ - Pacerier

@Pacerier canvas旨在提供低级别的操作，因此对于初学者（包括我自己）来说，直接使用API是比较复杂的。当然，也有一些库可以帮助管理渲染部分。 - Technohacker

Answer 2

当你使用Canvas进行开发时，你将不得不使用GameLoop技术，这是非常痛苦的，因为你必须一直重新绘制所有元素。

当你使用DOM进行开发时，你将能够只重绘已修改的对象，并将艰难的工作留给浏览器实现。

如果你的游戏每帧只有少量修改，则可以使用DOM，否则请使用Canvas！它会快很多！

- melanke

---

错误——如果你的游戏场景没有变化且代码正确，就不需要重新绘制场景。在这方面，Canvas需要更多的游戏开发技术知识。 - cloakedninjas

是的，你说得对！但我认为在这种情况下使用画布并不是一个好选择。 - melanke

Answer 3

使用canvas，您可以执行旋转等操作，而这些操作在纯dom中无法完成，除非使用一些“繁琐”的技巧。无论如何，dom更快，并且您可以在任何浏览器中使用它而不会出现问题。您必须考虑在游戏中要使用什么，如果只使用基本操作，请使用dom，否则选择canvas。

- mck89

---

DOM真的更快吗？您确定吗？我使用DOM创建了一个简单的预先游戏引擎，其中包含2-3个移动元素，但性能很差。我从未尝试过画布，但我在互联网上看到的示例非常快（比我看到的其他DOM游戏更快）。我该在哪里阅读相关信息？ - budzor

我非常确定。想想画布必须处理大量的数据。 - mck89

使用画布(canvas)的常见原因是它比创建和修改成千上万个DOM元素要快。 - Nickolay

使用Canvas，您可以使用简单的x，y坐标系统绘制线条、形状、文本等。您始终可以根据鼠标点击或其他用户输入事件重新绘制或擦除Canvas的一部分。与85年代的任何廉价图形卡一样，没有什么复杂的东西。有人能提供一个教程链接，介绍如何使用DOM绘制任意线条而不需要第三方库的某些层吗？然后我们可以比较代码。 - Audrius Meškauskas

@mck89，DOM从来都不快。链接在这里：http://gamedev.stackexchange.com/questions/23023/to-canvas-or-not-to-canvas-when-building-browser-based-games#comment247285_23026 - Pacerier

Answer 4

看这里：为什么Canvas不是Web游戏的明显选择。

- qqryq