javascript绘制图形(转)

javascript绘制图形

 

    想用javascript画图，当前可以通过什么途径实现呢？首先，jfreechart那种后台生成图片发送到前台的方法就不要包括进来了，我们就排列一下html+js进行画图的方式。

1.使用浏览器支持的图形引擎，比如ie下的vml，firefox,opera,safari支持的svg或者canvas。 2.http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm，这是一个相当纯正的js图形库，它特立独行的地方就是：“完全使用div来画图。” 3.http://excanvas.sourceforge.net/，google提供的工具库，可以在ie下使用vml模拟其他浏览器上canvas的api。

4.http://dojotoolkit.org/，宣传火暴的dojo提供一套2d和3d的图形api，会自动根据浏览器在vml,svg,canvas之间进行切换。

5.http://prototype-graphic.xilinus.com/这也是一套根据浏览器自动切换实现方式的图形api。 6.http://www.lutanho.net/svgvml3d/index.html还有这个，是专门用svg和vml实现3d效果的。     目前也就这些了.

 

ie下使用扩展canvas的javascript图形编程

 

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

 

转自：http://www.cnblogs.com/shellstudio/archive/2009/09/13/1565755.html

转载于:https://www.cnblogs.com/enjoyprogram/archive/2012/09/12/2681805.html