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