序：在 www.sitepoint.com 上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/ ，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页上画出漂亮的矢量图形了。进入这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ，映入眼帘的是折线、多边形、圆等常见的一些几何图形，起初我以为不过是一些图片罢了，当我看到这行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后，并细细阅读了关于它的说明后，才意识到除了VML 和 SVG可以在 网页上绘制显示矢量图形，仅用DHTML 和 Javascript 同样可以做到这一切！是不是觉得很吃惊呢？(双击一下这个文档，看看放大后的矢量图形吧)，ok!废话少说，下面我将详细介绍一下这个图形库。

★ 总览 (overview)

该图形库使用了 DHTML 和 Javascript 技术，它可以画线，圆，椭圆，折线，多边形，矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的，另外，使用这个图形库画出的图形是完全被优化到像素级的！

★ 试着由给定的参数画几个图形 (Try it out)

 

★ 性能（ Performance ）

在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形的图形表现元素。在工作区中，我们可以利用、并设置具有背景颜色的 Div （或 Layer ）元素，并且把这些 Div 元素缩小到与像素相似的大小，每一个 Div 元素代表了一个像素，然后用 Div 元素在网页上进行绘制。我们在使用这些 Div 模型来画矢量图形的时候，要尽可能避免一些冗余的接连处，看下面的图：



Image dynamically drawn with the Draw Shapes Library


unfavourable


better


optimal




Image dynamically drawn with the Draw Shapes Library


unfavourable


better


optimal




Image dynamically drawn with the Draw Shapes Library


unfavourable


better


optimal


从左至右，最左边的是最不好的画法，仔细看一下会发现阶梯状的每一行的连接处都会有一个 Div 连接，这个 Div 是没有用的，应该被删除；中间的画法已经很不错了，但应该再优化一下，以第一行为例：用三个 Div 表现水平的一行是多余的，应合为一个，同样垂直方向的 Div 也应合并（例如阶梯的末尾）。

按 Walter Zorn 所言，在画矢量图形时为获得更好的性能，并尽可能避免上述的一些冗余，他用了最好、最快速的算法，只用最少、最必要的 Div 元素来绘制图形。

需要说明的是，不要把这个图形库与用 Java 语言或其它语言开发的图形应用程序相比较，要知道，受基本的 HTML 和浏览器约束，采用 Javascript 脚本语言创建 Div 元素是非常慢的，在这里能达到图形绘制的最优化都已经是最好的结果。在使用这个图形库时，所绘制的图形像素最好不要超过 600 － 1000 像素。

是否应该选择 SVG? 目前具有 SVG 能力的浏览器或使用 SVG 插件的浏览器仍然是少数，所以如果你要画一些简单的矢量图形，使用这个矢量图形库还是一个不错的选择。

★ 浏览器的兼容性

Linux 系统 :

Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.


Windows 系统 :

Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

说明：如果在网页全部加载完成后，使用这个矢量图形库进行绘制，在 Opera 版本 7 以前的浏览器中不会执行， Netscape 版本 4 也不会执行。相反，当 HTML 页面正在被解析时， 使用这个图形库进行绘制是全部浏览器均能做到的。


★ 怎样使用这个矢量图形库？

★ 怎样使用这个矢量图形库中的绘制函数？

1 ． 创建一个 jsGraphics 对象

2. 图形绘制函数



函数名（方法）

示例代码（用 jg 图形对象）


setColor( "#HexColor" );
指定画笔颜色，一旦设置后，这个颜色会一直保留，直到下一次再重新指定画笔颜色，这个颜色值可以类似于 html 中的 #rrggbb 颜色表示，用名称表示颜色也可以，例如：“ maroon ”



jg.setColor("#ff0000");

or with identical result

jg.setColor("red");



setStroke( Number );
指定画笔采用的线厚度，这个厚度一旦被设置，会一直保留，直到下一次重新指定一，默认厚度是 1px.
要设置点划线型，需要传 Stroke.DOTTED 参数，点划线型同样适用于矩形，多边型，折线和椭圆。



jg.setStroke(3);

or

jg.setStroke(Stroke.DOTTED);



drawLine( X1, Y1, X2, Y2 );
画线。从第一个坐标点到第二个坐标点，线的厚度由 setStroke 设置。



jg.drawLine(20,50,453,40);



drawPolyline( Xpoints, Ypoints );
一条折线是一系列线段的集合， Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明：

var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);



var Xpoints = new Array(10,85,93,60);
var YPoints = new Array(50,10,105,87);
jg.drawPolyline(Xpoints,Ypoints);



drawRect( X, Y, width, height );

一个矩形的外边线。参照左上角的坐标点，并指定矩形的宽度和高度。



jg.drawRect(20,50,70,140);



fillRect( X, Y, width, height );

填充矩形，参照左上角的坐标点，并指定矩形的宽度和高度。



jg.fillRect(20,50,453,40);



drawPolygon( Xpoints, Ypoints );
多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明：

var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);

如果始点和终点末被指定，多边线将会自动闭合。



var Xpoints = new Array(10,85,93,60);
var Ypoints = new Array(50,10,105,87);
jg.drawPolygon(Xpoints, Ypoints);

Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.



fillPolygon( Xpoints, Ypoints );

填充矩形。参数作用见 drawPolygon()



jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));



drawEllipse( X, Y, width, height );

画椭圆边线。参照椭圆的外接矩形， x 和 y 是这个外接矩形的左上角坐标



jg.drawEllipse(20,50,70,140);
or
jg.drawOval(20,50,70,140);



fillEllipse( X, Y, width, height );
填充椭圆。参数见 drawEllipse()



jg.fillEllipse(20,50,71,141);
or
jg.fillOval(20,50,71,141);



drawString( "Text", X, Y );

写文本至由 x 和 y 坐标指定的位置。不同于 Java ，坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义，举个例子：

"Some Text<br>more Text" 会被转义为两行

setFont( "font-family", "size+unit", Style );
在 drawString() 之前调用。指定字体，大小，样式，字体和大小可以是与 HTML 中指示的一样，至于样式，可以使用的有：
Font.PLAIN 默认样式，非粗体和斜体
Font.BOLD 粗体
Font.ITALIC 斜体

它们可以结合使用



jg.setFont("arial","15px",Font.BOLD);
jg.drawString("Some Text",20,50);



drawImage( "src", X, Y, width, height );
在指定的位置画图像， ”src” 参数指定图像所在路径， width 和 height 参数允许调整图像宽高。



jg.drawImage("friendlyDog.jpg", 20,50,100,150);



paint();
必须显示调用，才能真正在 html 页面上画图形，不推荐每隔一段（每画一个图形）就调用一次。

像下面这样的调用应该避免 :
jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...

像下面这样的调用性能会很高 :
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*... 还有其它画的方法 ... */
jg.paint(); // 最后调用 paint()



jg.paint();



clear();

与图形对象关联的 div 画布中的图形被清除（在 div 中不是由这个图形对象创建的内容是不会被改变的）



jg.clear();



setPrintable( true );

默认情况下，打印这些图形是不太可行的，因为浏览器的默认打印设置中会关闭打印背景，调用 setPrintable() ，并设置参数为 true ，将重置图形为可打印的（至少在 Mozilla/Netscape 6+ and IE 中）