为什么我的 IE9 不支持画布？答案

【问题标题】：Why does my IE9 does not support canvas?为什么我的 IE9 不支持画布？
【发布时间】：2011-05-30 05:40:28
【问题描述】：

但是，当我尝试在 IE9 上做画布时，它不起作用：

对象不支持属性或方法'getContext'

我使用的是 IE9.0.8112.16421：

这是代码：

<html>
<head>

</head>
<body style="background:black;margin:0;padding:0;">
<canvas id="canvas" style="background:white;width:100%;height:100%;">noob</canvas>
<script>
var img=new Image();
img.onload=function(){
  var c=document.getElementById('canvas');
  var ctx = c.getContext('2d');
  var left,top;
  left=top=0;
  ctx.drawImage(img,left,top,20,20);
  var f=function(){
    left+=1;
    top+=1;
    c.width=c.width;
    ctx.drawImage(img,left,top,20,20);
  };
  setInterval(f,20);
};
img.src="http://a.wearehugh.com/dih5/aoc-h.png";
</script>
</body>
</html>

【问题讨论】：

你如何尝试获取canvas元素？
ie.microsoft.com/testdrive/Performance/FishIETank/Default.html 如果你看到了鱼，那么 Canvas 工作，你只是做错了。
@tylermwashburn 我确实看到了鱼
很奇怪，我看到的唯一与我所做的不同的是画布标签的关闭，尝试在黑暗中完全拍摄.. 你的代码在 jsfiddle 中对我来说很好. jsfiddle.net/YQmky
@Loktar 我已经关闭了它。不，它仍然无法正常工作。你用的是ie9.0.8112.16421？

标签： javascript canvas internet-explorer-9

【解决方案1】：

两件事：

<canvas> 标签应该有一个对应的结束标签</canvas>。虽然有些浏览器可以让您只使用一个开始标签，但其他浏览器（例如 Firefox，也许还有 IE）不会。

此外，IE9 要求您声明一个 HTML5 文档类型以使用 canvas 标签。您可以通过将<!DOCTYPE html> 放在代码顶部来做到这一点。

【讨论】：

很好，是的，我不想将其作为答案发布，因为我无法从技术上对其进行测试以验证 +1。
@Jeff 我已经关闭了它，但它仍然无法正常工作。你用的是ie9.0.8112.16421？
嗯，奇怪，尝试在顶部包含，ala stackoverflow.com/q/5016513/353278
好眼光。永远不会注意到。 :)
有同样的问题。还需要检查 IE9 是否处于兼容模式（地址栏中的页面图标损坏）

【解决方案2】：

如果 IE9 在兼容模式下运行，即使您使用的是 HTML5 DOCTYPE 标签，canvas 标签也不会被识别。至少这是我的经验。

检查 IE9 是否在兼容模式下运行，如果站点位于 Intranet 上，则可能是这种情况。

【讨论】：

如果你在 head 标签之后额外添加 IE 将始终使用它的最高版本渲染模式。如果它有 chrome 插件，它会使用它。取自样板 HTML5。
哇。是的，这为我解决了。我试图在我公司的 Intranet 站点上显示 HTML 5 页面。通过在 Tools\Compatibility View Settings 中关闭兼容模式，最终会显示 HTML 5 页面。另一个来自微软的荒谬古怪的设置！
还有一个问题：我实际上希望这个页面显示在我的 C# 应用程序的 WebView 窗口中。在那里，它继续显示“对象不支持属性或方法'getContext'”消息。我怎样才能在 WebView 中打开这个兼容性黑客？

【解决方案3】：

<!DOCTYPE html> 必须是您页面上的第一件事。我在标签之前有一个脚本，它一直给我同样的错误。这只发生在 IE9、Chrome 和 Firefox 中，即使在 doctype 标记之前使用脚本。

【讨论】：

<!DOCTYPE html> 应该始终是您页面上的第一件事，无论使用哪种浏览器。

【解决方案4】：

运行 IE 9.0.8112.16421。画布元素最初不起作用，但如果我按 F12 调出开发工具，然后刷新，它就会开始工作。没有打开 devtools 窗口的正常刷新将不起作用。可能是 JS 初始化问题，因为在我将画布绘图代码移动到其自己的 .js 文件之前，画布正在工作。在 Chrome/Firefox/Safari 中运行良好。

【讨论】：

【解决方案5】：

在兼容性视图中使用 IE10 时，请检查 IE 兼容版本。输入 F12（打开开发者工具）并检查您需要测试和浏览器的相应 IE（例如 IE9）版本将在此版本下工作。

【讨论】：

【解决方案6】：

伙计们！

查看 Google 代码上的 Explorer Canvas： https://code.google.com/p/explorercanvas/

希望这会有所帮助！

泽

【讨论】：

100%兼容吗？
不能确定...我得到了 IE11，它似乎在 IE9 模拟中工作。如果我最终安装了原生 IE9，我会告诉你它的运行情况。