混合canvas和CSS3元素

Question

我正在使用canvas实现HTML5游戏。现在我正在考虑使用在画布上具有绝对位置的HTML元素来制作所有文本叠加，例如工具提示，speechbubbles，infowindows等。所以我可以使用CSS3提供的许多效果和转换。

但我不确定表现。必须快速添加和删除这些叠加（这是MMORPG喜欢的东西，所以会有很多语音泡沫等等）。

关于表现可能有两个问题：

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

2. HTML和CSS3本身。

另一种选择是在画布本身管理这些元素，每帧绘制它们。但也许我再次有性能损失，因为额外的代码，超时和我必须添加的东西，以实现类似CSS3中的效果。无论如何都需要遍历一些数据结构。

任何建议，意见和经验？

提前致谢。

Answer 1

考虑仅使用上述两种技术中的一项。也许你可以在手机或平板电脑上发布该应用程序。我认为在这些设备上会同时处理问题。另外一件事：如果你留在画布上，就不用担心兼容性了。它不是一个技术性的，而是一个发人深省的答案。

Answer 2

在HTML5游戏中使用DOM进行UI元素的唯一最佳原因是事件处理。

如果您在画布上绘制所有内容，则需要编写自己的逻辑来处理点击并确定点击的内容，如果您有多层界面，这可能会很快变得非常复杂。

使用DOM元素（特别是在使用像jQuery这样的库时），这是微不足道的，您可以轻松创建丰富的交互式UI。

我能想到的唯一缺点是你可能会遇到浏览器的不一致，特别是如果使用CSS3，但jQuery也会帮助解决这个问题。

我认为另一个缺点是，一旦你走下DOM路线，你的游戏总是一个浏览器游戏，而如果它是100％画布，总会有可能将代码移植到另一种语言和让它成为原生，但我想这对某些人来说只是一个缺点。

Answer 3

解决此问题的一种方法是在画布对象后面使用“动态”图像映射。然后你可以根据需要使用dom。请注意，您需要将画布上的点击传递到图像映射。