混合使用canvas和CSS3元素

Question

我正在使用canvas实现一个HTML5游戏。现在我正在考虑使用绝对定位的HTML元素来制作所有文本覆盖物，如工具提示，说话气泡，信息窗口等，以便我可以使用CSS3提供的许多效果和过渡。

但是我不确定性能如何。这些覆盖层必须经常添加和删除（就像MMORPG一样，会有很多说话气泡等等）。

性能方面可能有两个问题：

1. DOM遍历以添加/删除。也许缓存可以帮助？

2. HTML和CSS3本身。

另一个选择是在canvas本身中管理这些元素，每帧绘制它们。但是，也许由于额外的代码，超时和其他东西，我再次面临性能损失，以实现类似于CSS3的效果。而且无论如何都需要遍历某些数据结构。

有任何建议、意见或经验吗？

提前致谢。

- User

---

通过缓存对“重要”元素的引用，可以减少DOM遍历的时间；我常常为此保留一些唯一ID => DOM元素的哈希表。可以将ID存储为数据-*属性以帮助实现此方案。至于将CSS3与Canvas混合使用，我自己也在思考这种策略（+1）。转换（canvas坐标->屏幕坐标）必须很好地被抽象化，否则您最终会陷入混乱，试图弄清楚如何在Canvas上方定位您的常规元素。 - Tony R

Answer 1

考虑只使用这两种技术之一。也许你可以将应用程序发布在移动设备或平板电脑上。我认为，在同时处理这两个设备时可能会出现问题。另外，如果你坚持使用画布技术，就不必担心兼容性问题。这不是一个技术性的回答，而是一个发人深省的想法。

- zsitro

---

是的，我同意这是最佳选择，至少就可维护性和可移植性而言。 - User

Answer 2

在HTML5游戏中使用DOM元素作为UI的最佳理由是事件处理。如果你在画布上绘制所有内容，你将需要编写自己的逻辑来处理点击事件并决定点击了什么，这很快就会变得非常复杂，特别是如果你有多层界面。而使用DOM元素（尤其是使用像jQuery这样的库）则非常简单，你可以轻松创建一个丰富和交互式的UI。

我能想到的唯一缺点是可能会遇到浏览器不一致性，特别是在使用CSS3时，但是再次使用jQuery可以解决这个问题。我想另一个缺点是一旦你选择了DOM路线，你的游戏将永远是一个浏览器游戏，而如果它是100%的画布，总会有将代码移植到另一种语言并使其成为本地化的可能性，但我想这只对某些人来说才是一个缺点。

- beeglebug

Answer 3

一种处理这个问题的方法是在画布对象后面使用一个“动态”图像映射。然后，您可以根据需要使用DOM。请注意，您需要将画布上的点击事件传递到图像映射中。

- tnt-rox