Canvas在IE上的兼容问题


前文提到最近在做网页设计,不做不知道,一做吓一跳,我们的网站越往下走信息量越大,需要做的东西也越多,特别是需要和后端协同是一个非常考验团队合作的事情,在我做注册界面的验证码的时候,遇到了Canvas在IE浏览器上不兼容的问题。以下进行说明。


canvas 是html5新增加的元素,IE从IE9开始支持canvas,IE8及以下不支持HTML5。
在ExplorerCanvas库(http://excanvas.sourceforge.net/)中调用IE内部功能提供了几乎相同的API。 但ExplorerCanvas不支持字体, 所以为了使用文字, 还需要使用canvas-text库(http://code.google.com/p/canvas-text/)。
所以(手动划重点)如果同一页HTML要兼容低版本IE和其它支持HTML5的浏览器, 可以用如下的语法选择性加入低版本IE需要的部分:

<!--[if IE]>
<script type="text/javascript" src="javascript/excanvas/excanvas.js"></script>
<script type="text/javascript" src="javascript/excanvas/canvas.text.js"></script>
<script type="text/javascript" src="javascript/excanvas/faces/optimer-normal-normal.js"></script>
<![endif]-->

但是!!!一定要注意这个问题,因为引入excanvas.js以后,在ie下,文档中的canvas就可以用了,但是如果是通过createElement方法动态创建的就不行了,如下所示。

var canvas=document.createElement(”canvas”);
if(canvas.getContext){
alert(”support getContext()”);
}


原因是,解释器在加载并执行excanvas.js这个脚本代码的时候,G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素,然后初始化这些元素,亦即是将标准canvas的那些个方法赋予ie下的canvas:

var els = doc.getElementsByTagName(”canvas”);
for (var i = 0; i < els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}

总结:静态创建的canvas 标签,在加载excanvas.js脚本的时候会被初始化,动态创建的canvas则没有。


解决办法:新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。



if(!(document.getElementById(“canvas”).getContent)){
G_vmlCanvasManager.ininElement(document.getElementById(“canvas”));
}

但是,G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的,我在全局范围下就没有办法引用到,还好,在excanvas.js文件的后面,有一句语句,

G_vmlCanvasManager = G_vmlCanvasManager_;

在这些过程中感觉自己学到了更多东西,很大的满足感,并且非常期待地看到最后实现的结果。一起加油!