ie下使用扩展canvas的javascript图形编程
2011-11-07 21:58
337 查看
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);
引入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);
相关文章推荐
- 图形编程——Paint和Canvas的基本使用
- JavaScript实现使用Canvas绘制图形的基本教程
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
- Canvas:使用JavaScript进行基本图形操作与处理
- 使用Raphael 画图(二) 扩展的图形 (javascript)
- Android图形编程(1):Canvas使用
- 趣味编程-JavaScript-使用画布画画canvas
- Firefox, IE等不同浏览器对JavaScript,CSS不同解析问题 (转备以后使用)
- 如何使用ASP.NET不用脚本(JavaScript)达到新开IE(浏览器)窗口的目的?
- 并发编程之线程池的使用及扩展和优化
- OpenGL基础图形编程 - OpenGL辅助库的基本使用
- 使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
- ArcGIS api for javascript——图形-使用多个图形图层
- <<javascript 高效图形编程>>笔记
- 使用Delphi开发IE右键菜单扩展
- 使用Delphi开发IE按钮扩展
- 使用JavaScript和Canvas实现下雪动画效果
- 使用Delphi开发IE右键菜单扩展
- 使用 JavaScript 实现 XMLHttpRequest,在IE,FireFox 上测试通过
- 使用Delphi开发IE右键菜单扩展