`
rockyuse
  • 浏览: 191836 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

IE下使用excanvas.js的注意事项

 
阅读更多

下载网址：http://code.google.com/p/explorercanvas/downloads/list

 

简单的示例：

<!DOCTYPE html>
<html>
<head>
<title>excanvas demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="excanvas.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
window.onload = function(){
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "red";
	ctx.beginPath();
	ctx.moveTo(30, 30);
	ctx.lineTo(150, 150);
	ctx.quadraticCurveTo(60, 70, 70, 150);
	ctx.lineTo(30, 30);
	ctx.fill();
}
</script>
</body>
</html>
 

 

 

引入excanvas.js以后，在ie下，文档中的canvas就可以用了，但是如果是通过createElement方法创建的就不行了
var canvas=document.createElement(”canvas”);
if(canvas.getContext){
alert(”support getContext()”);
}
这 段代码在ie下不工作，于是把google搞的这个让ie支持canvas的代码大概地读了一遍，知道了是怎么回事。将代码放到aptana里面看，10 分钟不到，785行代码，还不错，我想，这得益于之前仔细看过犀牛书前面js core部分7遍以及对canvas和vml的了解吧。

原来，加载并执行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标签，那就没有问题，这段脚本将找到的canvas元素作为参数传递给 G_vmlCanvasManager_.initElement()这个方法。但是通过createElement方法创建的canvas就不行了，因 为调用这段脚本的时候，后来新创建的canvas元素还没有被它找到。
那么，解决办法就是新创建了一个canvas元素就调用G_vmlCanvasManager_.initElement()方法来初始化。

但是，G_vmlCanvasManager_是在一个匿名函数function(){}里面定义的，我在全局范围下就没有办法引用到，还好，在excanvas.js文件的后面，有一句语句，
G_vmlCanvasManager = G_vmlCanvasManager_;
由于js的函数中，如果一个变量不通过var来定义，那么就会把这个变量当作一个全局变量，好啦，现在有一个全局变量来引用它了。
那么，下面是解决问题的代码：
$(function(){
    var canvas=document.createElement(”canvas”);
    document.body.appendChild(canvas);
    if($.browser.msie){
        canvas=window.G_vmlCanvasManager.initElement(canvas);
    }
    if(canvas.getContext){alert(”support”);}
});
这里我用了jquery，在DOM ready以后才执行这段脚本。
另外，记得canvas=window.G_vmlCanvasManager.initElement(canvas);之前要将新创建好的canvas追加到文档流中：document.body.appendChild(canvas);

 

另外与jquery混合使用的时候必须使用jquery1.7以上的版本，具体为什么只兼容1.7以上的版本，我也不晓得了

分享到：
| 清除浮动大全
评论
1 楼 huangyali2 2015-11-06  
excanvas.js没有实现canvas的clearRect(x,y,width,height)方法，他只实现了一个clearRect()的无参方法，实现就是把element.innerhtml='';不能像canvas那样清除指定区域，请问楼主有什么解决办法么？？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics