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

Pac*_*ier 25 javascript canvas internet-explorer-9

DiveIntoHTML5 Canvas声称IE9支持canvas.

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

对象不支持属性或方法'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>
Run Code Online (Sandbox Code Playgroud)

Jef*_*eff 52

两件事情:

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

此外,IE9要求您声明HTML5文档类型以使用canvas标记.您可以通过放置<!DOCTYPE html>在代码顶部来完成此操作.

  • 很好,是的不想发布它作为答案因为我无法从技术上测试它来验证+1. (2认同)

Mik*_*her 14

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

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

  • 如果你额外添加<meta http-equiv ="X-UA-Compatible"content ="IE = Edge; chrome = 1">在head标签之后,IE将始终使用它的最高版本的渲染模式.如果它有chrome插件则使用它.取自Boilerplate HTML5. (2认同)

小智 6

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