canvas在IE上的兼容问题

引用:Canvas 教程  https://developer.mozilla.org/en/Canvas_tutorial

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()”);
}

这段代码是在IE上不工作。

原因是，解释器在加载并执行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元素就调用G_vmlCanvasManager_.initElement()方法来初始化。

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

so...

if( !( document. getElementById( "canvas"). getContext)){

             G_vmlCanvasManager. initElement( document. getElementById( "canvas"));

        }

---end