混合画布和 CSS3 元素答案

【问题标题】：Mixing canvas and CSS3 elements混合画布和 CSS3 元素
【发布时间】：2012-04-21 07:56:35
【问题描述】：

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

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

可能有两个关于性能的问题：

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

有什么建议、意见、经验吗？

提前致谢。

【问题讨论】：

DOM 遍历时间可以通过缓存对“重要”元素的引用来减少；为此，我经常保留 someUniqueId => DOMElement 的哈希值。 id 可以存储为元素上的 data-* 属性以帮助实现此方案。至于将 CSS3 与 Canvas 混合，我自己一直在想这个策略（+1）。必须很好地抽象转换（画布坐标 -> 屏幕坐标），否则您最终会陷入混乱，试图找出在画布顶部放置常规元素的位置。

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 HTML5 游戏中为 UI 元素使用 DOM 的唯一最佳理由是事件处理。

如果您在画布上绘制所有内容，您将需要编写自己的逻辑来处理点击并确定点击了什么，这很快就会变得非常复杂，特别是如果您有多个界面层。

使用 DOM 元素（尤其是在使用 jQuery 之类的库时）这很简单，您可以轻松创建丰富的交互式 UI。

我能想到的唯一缺点是您可能会遇到浏览器不一致的问题，尤其是在使用 CSS3 时，但 jQuery 会再次帮助解决这个问题。

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

【讨论】：

【解决方案3】：

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

【讨论】：