`
琉璃月
  • 浏览: 44817 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

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

简单的示例:
Java代码  收藏代码

  
 <!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以上的版本,我也不晓得了
分享到:
评论

相关推荐

    excanvas.min.js_0.8.3.zip

    这段代码会检测浏览器是否为IE,并且只有在IE下才会加载Excanvas.min.js。然后,你就可以在JavaScript代码中像使用正常Canvas一样使用`&lt;canvas&gt;`元素了。 值得注意的是,虽然Excanvas.js解决了IE的兼容性问题,但它...

    excanvas.js--图形JS

    Excanvas.js是一款JavaScript库,专为那些不支持HTML5 Canvas元素的老版本IE浏览器设计。Canvas是HTML5的一个重要组成部分,它允许开发者在网页上绘制2D图形,包括线条、形状、图像以及进行复杂的动画效果。然而,...

    excanvas.js下载

    excanvas.js免费下载 希望可以帮到有需要的朋友

    让IE支持HTML5中canvas标签:excanvas.js

    excanvas.js是一个JavaScript库,由G_v2开发,其目的是为不支持HTML5 canvas的旧版IE浏览器提供兼容性解决方案。这个库利用了VML(Vector Markup Language),这是微软在IE5中引入的一种矢量图形技术,来模拟canvas...

    excanvas.js

    excanvas.js js画图插件。

    excanvas.compiled.js 下载

    excanvas.compiled.js相关

    excanvas.qrcode.mix.js

    该js由本人混合,将jquery.qrcode.min.js与excanvas.compiled.js完美结合,提供了IE8等低版本浏览器不兼容canvas控件生成二维码的解决方案。解决了jquery.qrcode.min.js使用table模式生成二维码时打印不显示的问题。...

    excanvas.min.js html5.js html5shiv.js respond.min.js

    1. excanvas.min.js:Excanvas是一个JavaScript库,用于在不支持Canvas元素的老版IE浏览器中提供Canvas的支持。Canvas是HTML5中的一个核心元素,允许开发者在网页上进行动态图形绘制。通过Excanvas,开发者可以利用...

    excanvas.min.js

    配合html5.js使用,可以再低版本浏览器使用canvas进行绘图,支持IE6~8浏览器。

    excanvas.compiled.zip

    6. **使用方法**:在页面中引入`excanvas.compiled.js`后,开发者可以通过`G_v2.0.Excanvas`实例化一个Canvas元素,然后就可以像在其他现代浏览器中一样使用Canvas API进行绘图。 7. **实例化Canvas**:通常,你...

    bluebird.js excanvas.js

    总的来说,bluebird.js和excanvas.js是解决IE浏览器兼容性问题的利器,它们分别解决了Promise和Canvas的支持,使得开发者可以在不牺牲功能的前提下,为更广泛的用户群体提供良好的浏览体验。在项目中合理运用这两个...

    excanvas.js jQuery 曲线绘制(图表)插件

    excanvas.js jQuery 曲线绘制(图表)插件.excanvas 使得 IE 能通过 VML 支持 Canvas 标签

    excanvas_canvas.js_

    Excanvas是JavaScript的一个库,专为那些不支持HTML5 Canvas元素的老版本IE浏览器设计的。Canvas是HTML5中一个强大的绘图接口,允许开发者通过JavaScript动态绘制2D图形,包括图像、文字、线条、形状等。然而,在...

    excanvas_r3.zip解决了ie8不支持canvas

    5. **README**:此文件通常包含关于如何使用、安装和配置Excanvas的基本说明,以及可能的注意事项或更新信息。 6. **testcases**:这是一个测试用例目录,包含了一些示例代码,用于验证Excanvas的功能和性能,开发者...

    excanvas-js

    值得注意的是,尽管Excanvas.js 提供了良好的兼容性,但它的性能可能无法与原生支持Canvas的现代浏览器相比,因此在考虑兼容性和性能平衡时,可能需要针对旧版IE浏览器做些优化。 附带的"说明.txt"文件可能包含了...

Global site tag (gtag.js) - Google Analytics