Web图形技术的一些调研

Web项目开发过程中要找到完美的图形解决方案比较困难，只能根据自己的需要，选择自己最合适的画图方案。

Web图表一般有以下几种做法： 

（1）使用客户端控件技术 

（2）使用服务器端生成图片 

（3）使用富客户端技术 

1、使用客户端控件技术 

应用微软的ActiveX控件以及Java的applet技术对图形的支持来显示一个图表。这种方式显然对于客户端要求太高，插件的开发相对麻烦，随着现在主流浏览器放弃对控件的支持后，这种方式只适合一些局域网的应用，而对于因特网的环境就显得不太适合。

2、使用服务器端生成图片 

直接在Web服务器端生成好图表图片文件后发送到浏览器。 

优点：服务器端生成图形，减轻客户端负担。 

缺点：Web应用时，特别是动态生成图片，会产生大量的冗余图片数据。 

3、使用富客户端技术 

根据服务器返回数据在浏览器端绘制图表，一般有以下几种方案： 

（1）VML技术 

VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。 

优点：基于XML标准，支持高质量的矢量图形显示。结合脚本，可以让图形产生动态的效果。

缺点：只能在IE浏览器或以IE为内核的浏览器才能用VML。 

（2）SVG技术 

SVG（可放缩的矢量图形）是W3C在2000年8月制定的一种新的二维矢量图形的格式。 

优点：基于XML标准，采用文本来描述对象，具有交互性和动态性，完全支持DOM。 

缺点：IE则依赖Adobe Systems的一款插件支持SVG。用户必须下载、安装这款插件才能在IE中显示SVG格式图像。 

（3）多比控件 

多比图形控件出现简化了这种开发难度，它是一款基于Web的矢量图形控件，能够检测浏览器类型，自动选择VML或SVG方案进行做图，类似于网页上的Visio控件，是目前国内外最佳的基于Web矢量图案解决方案。多比图形编辑器实现了图形、图像、文字的有机统一。它除了支持HTML中常用 的标记，如文本、图像、链接、交互性、CSS的使用、脚本外，还提供了大量针对图形、图像、动画的特定标记。对SVG图形文件进行编辑管理的过程为：SVG图形文件经XML解析器打开，并在内存中生成一个对象树，用鼠标事件来驱动脚本执行，脚本通过DOM接口对象进行相关的操作，来实现图形绘制、编辑等功能。

缺点：商业的东西，要米的。 建议大公司采用 

（4）Flash技术 

Open Flash Chart是一个Flash图表组件，很容易安装，提供以下语言的API：PHP、Perl、Python、Java、Ruby on Rails、.NET来控件图表。 

优点：图形效果好，根据服务器数据生成相应的图形，可以适当编写事件处理。 

缺点：需要Flash插件支持，绘制特定的图形需要专业的Flash技术支持。 

（5）Canvas技术 

<canvas>是一个新的HTML无素，这个元素可以被Script语言用来绘制图形。例如可以用它来画图、合成图像、做简单的动画。 

优点：基于标准规范、灵活绘制各类图形。 

缺点：IE需要使用canvas.js类支持图形的扩展。 

（6）JavaScript图形库技术（jsgraphics） 

JavaScript图形库可以在网页上动态绘制圆、椭圆、斜线、折线、多边形（三角形、矩形）。底层通过创建大量1px*1px的DIV实现，同时对于连续的像素进行优化，尽量地减少所需的DIV，因此有较好的性能，当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML、HTML 、Canvas是无法相比较的。

优点：使用Web的基本技术实现图形化，不需要任何的扩展或支持。 

缺点：图形非矢量，曲线情况下平滑度不够，图形较多时性能存在一定的问题。