我正在使用画布实现 HTML5 游戏。现在我正在考虑使用在画布上具有绝对位置的 HTML 元素来制作所有文本覆盖，如工具提示、语音气泡、信息窗口等。所以我可以使用 CSS3 提供的许多效果和过渡。
但我不确定性能。这些覆盖层必须经常添加和删除（就像 MMORPG 一样，所以会有很多气泡等等）。
关于性能可能有两个问题：
DOM 遍历以添加/删除。也许缓存可以提供帮助？
HTML 和 CSS3 本身。
另一种选择是在画布本身中管理这些元素，在每一帧中绘制它们。但也许我又一次受到了性能损失，因为我必须添加额外的代码、超时和其他东西，才能实现与 CSS3 中类似的效果。无论如何都需要遍历一些数据结构。
有什么建议、意见、经验吗？
提前致谢。
考虑只使用上述两种技术中的一种。也许您可以在手机或平板电脑上发布该应用程序。我认为在这些设备上同时处理两者会出现问题。还有一件事：如果你留在画布上，就不用担心兼容性。这不是一个技术问题，而是一个发人深省的答案。
在 HTML5 游戏中为 UI 元素使用 DOM 的唯一最佳理由是事件处理。
如果您在画布上绘制所有内容，您将需要编写自己的逻辑来处理点击并确定点击了什么，这很快就会变得非常复杂，特别是如果您有多层界面。
使用 DOM 元素（尤其是使用 jQuery 之类的库时）这很简单，您可以轻松创建丰富的交互式 UI。
我能想到的唯一缺点是您可能会遇到浏览器不一致的问题，尤其是在使用 CSS3 的情况下，但 jQuery 再次对此有所帮助。
我想另一个缺点是，一旦你走 DOM 路线，你的游戏总是一个浏览器游戏，而如果它是 100% 画布，总是有可能将代码移植到另一种语言并使其成为原生的，但我想这对某些人来说只是一个缺点。
解决此问题的一种方法是在画布对象后面使用“动态”图像映射。然后就可以根据需要使用dom了。请注意，您需要将画布上的点击传递到图像映射。