在JavaScript游戏开发中Canvas与DOM的优点/缺点是什么？

Question

与使用画布相比，在'纯'DOM中创建游戏有哪些优缺点？

Answer 1

<强> 画布 专业人士：

1. 可以操纵像素并应用滤镜效果，因此便于图像处理;
2. 对于小尺寸但游戏中有数百个元素非常有效
3. 可以使用canvas找到许多游戏库，例如box2dweb，并且可以制作像愤怒的小鸟这样的精彩游戏
缺点：
1. 它是无状态的，所以你必须在画布中记录元素的状态，并自己处理命中测试。
2. 对于非常大的尺寸效率低但游戏中只有一些元素
3. 能力强，责任重大。绘画的自由，带来你必须负责所有绘图人员。幸运的是，那里有很多库，比如cocos2d-html5，IvanK。

<强> DOM 优点：

1. 由浏览器呈现，因此不易出错;

缺点：

1. 只能用CSS做简单的动画，这会让游戏不流利;
2. 没有好处理数百个DOM元素;

Answer 2

使用帆布，您可以执行诸如旋转之类的操作，而不使用一些“沉重”的技巧。无论如何，dom更快，您可以在每个浏览器中使用它而不会出现问题。你必须考虑你将在游戏中使用什么，如果你只使用基本操作使用dom，否则选择画布。

Answer 3

请看这里：Why Canvas is not an obvious choice for web games。

Answer 4

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

使用DOM进行开发时，您将只能重绘已修改的对象，并且可以让浏览器实现更加困难。

如果你的游戏每帧有一些修改，那么你可以使用DOM，否则请使用Canvas！它快得多！