如何在 IE 中使用 HTML5 画布元素？答案

【问题标题】：How can I use the HTML5 canvas element in IE?如何在 IE 中使用 HTML5 画布元素？
【发布时间】：2010-11-22 21:09:23
【问题描述】：

我正在尝试使用 HTML5 画布元素来绘制一些圆弧和圆 - 这在 FF 中非常有效，但 IE8 似乎不支持它。

现在，存在似乎使 IE8 与 Canvas 一起工作的 Javascript 库。 An example can be found here.

我已经阅读了他们的全部源代码，但我无法理解他们如何使 Canvas 与 IE8 一起工作。有人可以说明一下使用的方法吗？

【问题讨论】：

标签： internet-explorer-8 html canvas

【解决方案1】：

你可以试试 fxCanvas：https://code.google.com/p/fxcanvas/

它在 flash shim 中实现了几乎所有的 Canvas API。

【讨论】：

这得到了我的投票，因为 excanvas 的性能很差。该库确实存在一些问题，但在我的实际测试中，它在性能和稳定性方面都领先于 flashcanvas。
这个有新版本吗？链接坏了

【解决方案2】：

如果你需要使用 IE8，你可以试试这个用于矢量图形的 JavaScript 库。就像同时解决了IE8的“canvas”和“SVG”不兼容问题。

Raphaël

我刚刚在一个快速示例中进行了尝试，它可以正常工作。我不知道源代码的可读性如何，但我希望它对您有所帮助。正如他们在其网站上所说，该库与非常古老的浏览器兼容。

Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

【讨论】：

【解决方案3】：

您可以使用新发布的 IE 浏览器框架插件，但它要求 HTML 5 网站包含启用该插件的特殊元标记。

http://code.google.com/chrome/chromeframe/

Chrome Frame 似乎使用了 Explore Canvas (excanvas.js)。

【讨论】：

【解决方案4】：

我刚刚使用了flashcanvas，我得到了它的工作。如果您遇到问题，请务必阅读注意事项等。特别是，如果您动态创建画布元素，则需要显式初始化它们：

if (typeof FlashCanvas != "undefined") {
    FlashCanvas.initElement(canvas);
}

【讨论】：

【解决方案5】：

页面使用excanvas - 一个使用 IE 的 VML 渲染器模拟画布元素的 JS 库。

请注意，在 Internet Explorer 9 中，the canvas tag is supported natively!详情见MSDN docs...

【讨论】：

+1 表示 Google 为 IE 实现的画布。很遗憾看到第 3 方在您的浏览器中修复了限制 :)

【解决方案6】：

目前，ExplorerCanvas 是在 IE6、7 和 8 上模拟 HTML5 画布的唯一选项。您也说得对，它的性能很差。

我发现了一个粒子模拟器，它可以对 Google Chrome、Safari 和 Firefox 中真正的 HTML5 画布处理与 IE 中的 ExplorerCanvas 之间的差异进行基准测试。结果表明，支持 canvas 标签的主流浏览器的运行速度比带有 ExplorerCanvas 的 IE 中的模拟 HTML5 快大约 20 到 30 倍。

我怀疑是否有人会努力创建替代方案，因为 1) excanvas.js 的代码尽可能简洁，2) 当 IE9 发布时，所有主要浏览器都将最终支持 canvas 对象。希望我们能在一年内获得 IE9

埃里克@www.webkrunk.com

【讨论】：

谁能告诉我“慢”是什么意思？您的意思是浏览器经常变得无响应，有点像挂起，还是页面需要很长时间才能加载，因为每个页面都必须加载相当重量级的 excanvas.js 文件（是吗？）？
excanvas.js 不是太大。这个问题更多是关于基于画布的动画中可能的最大帧速率。