Chinaunix首页 | 论坛 | 博客
  • 博客访问: 327416
  • 博文数量: 206
  • 博客积分: 1040
  • 博客等级: 少尉
  • 技术积分: 1756
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-09 17:22
文章分类

全部博文(206)

文章存档

2015年(3)

2014年(147)

2013年(2)

2012年(54)

我的朋友

分类: HTML5

2015-01-14 16:09:29

http://rockyuse.iteye.com/blog/1618298

简单的示例:

Java代码  收藏代码
  1.   
  2.   
  3.   
  4. excanvas demo  
  5. "Content-Type" content="text/html; charset=utf-8">  
  6. "text/javascript" src="excanvas.js">  
  7.   
  8.   
  9. "canvas">  
  10. "text/javascript">  
  11. window.onload = function(){  
  12.     var canvas = document.getElementById("canvas");  
  13.     var ctx = canvas.getContext("2d");  
  14.     ctx.fillStyle = "red";  
  15.     ctx.beginPath();  
  16.     ctx.moveTo(3030);  
  17.     ctx.lineTo(150150);  
  18.     ctx.quadraticCurveTo(607070150);  
  19.     ctx.lineTo(3030);  
  20.     ctx.fill();  
  21. }  
  22.   
  23.   
  24.   
 

 

 

引入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以上的版本,我也不晓得了

阅读(939) | 评论(0) | 转发(0) |
0

上一篇:Chrome中drawImage无法画出image

下一篇:没有了

给主人留下些什么吧!~~