让excanvas支持动态创建的canvas标签(附演示文件)

　　大名鼎鼎的excanvas让低版本IE也能支持HTML5标准的canvas标签，虽然功德无量，但也留有小小的缺憾，比如由于excanvas是在页面初始化的时候统一把所有canvas标签初始化一次。一旦动态生成或者未初始化之前就有脚本操作了canvas标签，就会报错了。

　　参考ITEYE的一篇博文 给excanvas添加fillText方法 ，里面提供了不少的增强改进方法，非常值得借鉴。

　　但美中不足的是，该文中对于动态创建canvas标签的初始化，解决方式不够智能，需要程序员自己额外些初始化代码。而且由于excanvas对所有canvas标签的初始化是在document准备完毕时才进行的，如果页面中有实时执行的脚本调用或创建了canvas标签，就会导致错误，因为此时canvas标签的属性和方法还没有被初始化。

　　那么如何解决这个问题呢，如何让excanvas智能的处理各种情况下对canvas标签的初始化呢？非常简单，我们可以对通过对document方法的劫持重载来达到这个目的。当document的createElement、getElementById、getElementsByTagName、getElementsByName以及getElementsByClassName方法被调用时，我们可以先获取对象，然后检查对象是否为没有初始化的canvas标签，是则进行初始化，处理完成后，再把对象返回。

　　具体方法是，先用一个变量缓存这些方法，然后劫持重载这些方法，重新定义为我们自己写的处理函数即可。自定义函数中，我们先用缓存的原始方法获取对象，然后检查对象是否为未初始化的canvas标签，是则进行初始化，最后将处理过的对象返回。这样一来我们就对document的几个主要的对象获取方法都进行了重载，实现了自动动态初始化canvas的目的。

　　具体的JS代码如下，可自行添加到excanvas.js的最后一行之前，以确保该代码和excanvas同步工作。

//截获并重载元素获取方法，对canvas动态初始化
(function() {
	var _createElement=document.createElement;
	document.createElement=function(elementTag) {
		var obj=_createElement(elementTag);
		if (elementTag.toLowerCase() == 'canvas') {
			G_vmlCanvasManager.initElement(obj);
		}
		return obj;
	};
	
	var _getElementById=document.getElementById;
	document.getElementById=function(elementId) {
		var obj=_getElementById(elementId);
		if (obj.tagName.toLowerCase() == 'canvas' && !obj.getContext) {
			G_vmlCanvasManager.initElement(obj);
		}
		return obj;
	};
	
	var _getElementsByTagName=document.getElementsByTagName;
	document.getElementsByTagName=function(elementTagName) {
		var obj=_getElementsByTagName(elementTagName);
		for(var i=0;i<obj.length;i++) 
		if (obj[i].tagName.toLowerCase() == 'canvas' && !obj[i].getContext) {
			G_vmlCanvasManager.initElement(obj[i]);
		}

		return obj;
	};
	
	var _getElementsByName=document.getElementsByName;
	document.getElementsByName=function(elementName) {
		var obj=_getElementsByName(elementName);
		for(var i=0;i<obj.length;i++) 
		if (obj[i].tagName.toLowerCase() == 'canvas' && !obj[i].getContext) {
			G_vmlCanvasManager.initElement(obj[i]);
		}

		return obj;
	};
	
	if (!document.getElementsByClassName) {   
  document.getElementsByClassName=function(className) {
   var all = document.all ? document.all : document.getElementsByTagName('*');
   var elements = new Array();
   for (var i = 0; i < all.length; i++)
     if (all[i].className == className) {
        elements[elements.length] = all[i];
      }

    return elements;
   };
  }
  var _getElementsByClassName=document.getElementsByClassName;
  document.getElementsByClassName=function(className) {
  	var obj = _getElementsByClassName(className);
      for (var i = 0; i < obj.length; i++)
          if (obj[i].tagName.toLowerCase() == 'canvas' && !obj[i].getContext) {
              G_vmlCanvasManager.initElement(obj[i]);
          }

      return obj;
  };
})();

演示例子(IE678_ExCanvas支持测试.zip)下载 请使用IE6\7\8进行测试。