将 HTML Canvas 用于 UI 元素？答案

【问题标题】：Using HTML Canvas for UI elements?将 HTML Canvas 用于 UI 元素？
【发布时间】：2011-01-30 21:05:02
【问题描述】：

我的 Web 应用程序中有几个 UI 元素，例如按钮。我打算使用 CSS3 的转换来动画从一个背景图像到另一个的过渡。我发现至少目前的过渡草案是不可能的。所以，我想知道使用 Canvas 作为按钮是否有意义。我确信它可以处理事件，所以，我认为这里没有问题。有吗？

【问题讨论】：

【解决方案1】：

使用raphael.js（MIT 许可）- 它使用 SVG（和用于 IE 的 VML）为您提供类似画布的 API，并且适用于包括 IE6 在内的所有主要浏览器。而且速度很快（即使在 IE 中也不会太慢）

【讨论】：

【解决方案2】：

我得出结论：对 UI 元素使用 Canvas 不是一个好主意。

例如，如果您使用 Canvas 创建一个选择框，该列表将如何出现在其他 HTML 元素的顶部？

【讨论】：

【解决方案3】：

Internet Explorer 不支持画布。此外，画布动画在 CPU 资源很少的 PC 上渲染速度非常慢。

除非您正在编写针对特定目标受众的内容（例如使用 Firefox 和双核 cpu 的内部用户），否则我认为您现在应该避免使用画布...

【讨论】：

不同意。我已经使用画布编写了自己的按钮类，而且速度并不慢。现在画布元素最慢的部分是使用 fillRect() 来清除画布，如果您的按钮的不同状态都具有相同类型的 alpha 掩码，您甚至不必清除。如果他不停地渲染按钮，即使按钮的状态没有改变，这就是它变慢的原因。
如果你问我，这真的有点矫枉过正。

【解决方案4】：

除了 IE 不支持，不支持。

【讨论】：