为什么我的IE9不支持画布?

时间:2011-05-30 05:40:28

标签: javascript canvas internet-explorer-9

DiveIntoHTML5 Canvas声称IE9支持画布。

但是,当我在IE9上尝试使用canvas时,它不起作用:

  

Object不支持属性或方法'getContext'

我正在使用IE9.0.8112.16421:

enter image description here

这是代码:

<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>

6 个答案:

答案 0 :(得分:52)

两件事:

<canvas>代码应具有相应的结束标记</canvas>。虽然有些浏览器会让你只使用一个开始标记,但其他浏览器(如Firefox,也许还有IE)却不会。

此外,IE9要求您声明HTML5 doctype以使用canvas标记。您可以将<!DOCTYPE html>放在代码顶部。

答案 1 :(得分:14)

如果IE9在兼容模式下运行,即使您使用的是HTML5 DOCTYPE标记,也无法识别canvas标记。至少这是我的经历。

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

答案 2 :(得分:6)

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

答案 3 :(得分:1)

运行IE 9.0.8112.16421。 Canvas元素最初不会起作用,但如果我按F12调出devtools,然后刷新,它就会开始工作。正常刷新w / o devtools窗口打开将无法正常工作。可能是一个JS init问题,因为在我将画布绘制代码移动到自己的.js文件之前画布正在工作。适用于Chrome / Firefox / Safari。

答案 4 :(得分:1)

在兼容性视图中使用IE10时请检查IE兼容版本。输入F12(打开开发人员工具)并检查需要测试和浏览器的相应IE(例如IE9)版本 将在这个版本下工作。

答案 5 :(得分:0)

人!

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

希望这有帮助!