为什么我的IE9不支持canvas?

25

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>

你如何尝试获取画布元素? - McKayla
2
如果您能看到鱼,那么Canvas是正常工作的,您只是做错了些什么。请访问http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html。 - McKayla
@tylermwashburn 我确实看到了这条鱼。 - Pacerier
1
奇怪,我注意到的唯一不同之处是画布标签的结束符,尝试使用<canvas></canvas>。不过你的代码在jsfiddle上对我来说运行良好。http://jsfiddle.net/YQmky/ - Loktar
@Loktar,我已经关闭了它。不行,它仍然无法工作。你使用的是IE9.0.8112.16421吗? - Pacerier
显示剩余2条评论
6个回答

52

两件事情:

<canvas> 标签应该有对应的闭合标签</canvas>。尽管有些浏览器可以只用一个开放标签,但其他浏览器(如 Firefox 和可能是 IE)不能这样做。

此外,IE9 需要你声明一个 HTML5 doctype 才能使用 canvas 标签。你可以通过在代码顶部放置 <!DOCTYPE html> 来实现。


2
不错,是的,我不想将其发布为答案,因为我无法进行技术测试以验证+1。 - Loktar
@Jeff,我已经关闭了它,但它仍然无法工作。你使用的是IE9.0.8112.16421吗? - Pacerier
嗯,有点奇怪,尝试在顶部包含<!DOCTYPE html>,类似于https://dev59.com/i2445IYBdhLWcg3wJ258。 - Jeff
好眼力,我从来没有注意到。 :) - McKayla
遇到了同样的问题。还需要检查IE9是否处于兼容模式(地址栏中的破碎页面图标)。 - BarsMonster

14
如果IE9运行在兼容模式下,即使您使用HTML5 DOCTYPE标签,画布标签也将无法识别。至少这是我的经验。
检查IE9是否在兼容模式下运行,如果网站在内部网络中,则可能是这种情况。

2
如果您在 head 标签后面添加 <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >,IE 将始终使用其最高版本的渲染模式。如果它有 Chrome 插件,则使用该插件。这段话摘自 Boilerplate HTML5。 - RedRoosterMobile
哇,没错,这解决了我的问题。我一直在尝试在公司的内部网站上显示一个HTML 5页面。通过在“工具\兼容性视图设置”中关闭兼容性模式,最终HTML 5页面得以显示。又是微软的另一个荒谬古怪的设置! - Mike Gledhill
还有一个问题:我实际上想在我的C#应用程序中的WebView窗口中显示此页面。但是,在那里,它仍然显示“Object doesn't support property or method 'getContext'”消息。我如何在WebView中也打开此兼容性hack? - Mike Gledhill

6

<!DOCTYPE html> 必须是你网页中的第一件事。我之前在标签之前放了一个脚本,但它总是出错。这只发生在IE9上,在Chrome和Firefox中即使在doctype标签之前也可以工作。


1
无论使用哪种浏览器,<!DOCTYPE html> 都应该是你页面中的第一件事。 - YemSalat

1
当使用IE10兼容性视图时,请检查IE兼容版本。按F12(打开开发人员工具),并检查您需要测试和浏览器将在此版本下正常工作的适当IE版本(例如IE9)。

1

正在运行IE 9.0.8112.16421。画布元素最初无法工作,但如果我按F12打开开发工具,然后刷新,它就开始工作了。在没有打开开发工具窗口的情况下进行普通刷新不起作用。可能是JS初始化问题,因为在将画布绘制代码移动到自己的.js文件之前,画布是可以工作的。在Chrome / Firefox / Safari中正常工作。


0

它是否百分之百兼容? - Pacerier
无法确定...我使用的是IE11,它似乎在IE9模拟器中运行良好。如果最终安装了本机IE9,我会告诉你它的表现如何。 - TzeMan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接