zoukankan      html  css  js  c++  java
  • [转]IE下使用excanvas.js之后,动态创建的canvas不支持getContext的解决方法

    引入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);

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

    alarm   作者:NewSea     出处:http://newsea.cnblogs.com/    QQ,MSN:iamnewsea@hotmail.com

      如无特别标记说明,均为NewSea原创,版权私有,翻载必纠。欢迎交流,转载,但要在页面明显位置给出原文连接。谢谢。
  • 相关阅读:
    js中不同的height, top的对比
    正则表达式入门以及记录
    CSS小记(持续更新......)
    Git远程操作
    Git Push 避免用户名和密码方法
    Git本地操作
    CSS3动画属性
    c语言文法
    实验一、词法分析器实验
    词法分析器
  • 原文地址:https://www.cnblogs.com/newsea/p/1745645.html
Copyright © 2011-2022 走看看