jsgraphics图形库基本函数说明
缺点：每个节点包括线都是由div拼接而成，
优点：兼容浏览器
一、方法：
1、设置画笔颜色 setColor("#hexcolor");
示例：
jg.setColor("#ff0000");
或
jg.setColor("red");
如果没有设置画笔颜色，则默认用黑色来画。
参数缺少时会出错。参数为非颜色值时也会出错（防错这一块，该库做得不是非常完善）。
2、设置画笔宽度setStroke(number);
示例：
jg.setStroke(3);
或
jg.setStroke(Stroke.DOTTED); //点线
如果没有设置画笔宽度，默认是1点宽。宽度是指从一边到另一边的点数，设为3，就是准准的3点，而不是5点。stroke.dotted为虚线，线的宽度为1。stroke.dotted也可以用-1来代替，其它负值时，都是1点实线。
3、画线drawLine(x1, y1, x2, y2);
示例：
jg.drawLine(20, 50, 453, 40);
如果后面的一个点坐标没有提供，不会出错，但结果不一定正确，只能设点模式为stroke.dotted时，相当于画一个点，而其它的，则会跑到y轴上。
4、画折线drawPolyLine(xpoints, ypoints);
示例：
var xpoints = new Array(10, 85, 93, 60);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolyLine(xpoints, ypoints);
如果x坐标与y坐标数量不匹配，不会出错，但不匹配的点画不出线，只画出杂乱的点。
5、画框drawRect(x, y, width, height);
示例：
jg.drawRect(20, 50, 70, 140);
实际宽度是width+pixel，而不是width+2*pixel。中间空白的宽度是width-pixel。顶点不管线宽，总是(x, y)。
后面宽度与高度缺少，画出几个杂乱的点。
6、填充区域fillRect(x, y, width, height);
示例：
jg.fillRect(20, 50, 453, 40);
与drawrect不同，实际宽度就是width。
以下画出两种颜色的框，中间还带一像素的背景色。
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
7、画任意多边形（封闭折线）drawPolygon(xpoints, ypoints);
示例：
var xpoints = new Array(10, 85, 93, 20);
var ypoints = new Array(50, 10, 105, 87);
jg.drawPolygon(xpoints, ypoints);
如果参数中最后一个点不匹配，则画出折线，而不封闭。
8、填充任意多边形fillPolygon(xpoints, ypoints);
示例：
jg.fillPolygon(new array(20, 85, 93, 40), new array(50, 50, 15, 87));
不错，这都能正确地填充好。
9、画椭圆drawEllipse(x, y, width, height);
示例：
jg.drawEllipse(20, 50, 70, 140);
jg.drawOval(20, 50, 70, 140);
要画圆，则是宽与高一样就行。
10、填充椭圆fillEllipse(x, y, width, height);
示例：
jg.fillEllipse(20, 50, 71, 141)
或
jg.fillOval(20, 50, 71, 141);
11、画弧fillArc(x, y, width, height, start-angle, end-angle);
示例：
jg.fillArc(20, 20, 41, 12, 270.0, 220.0);
总是从前面的角度顺时针转到后面的角度，即使前面的角度大于后面的角度
12、设置字体setFont("font-family", "size+unit", style);
输出文字
drawString("text", x, y);
示例：
jg.setFont("arial", "15px", Font.ITALIC_BOLD);
jg.drawString("some text", 20, 50);
字体样式有以下几种值：plain、bold、italic、italic_bold、bold_italic
13、固定区域输出文字drawStringRect("text", x, y, width, alignment);
示例：
jg.setFont("verdana", "11px", font.bold);
jg.drawStringRect("text", 20, 50, 300, "right");
alignment的内容就是css中text-align的内容：left、right、center、justify
14、输出图像文件drawImage("src", x, y, width, height);
示例：
jg.drawImage("dog.jpg", 20, 50, 100, 150);
如果有宽度与高度，就会把图像拉长或压缩，如果没有，则显示图像的原大。
15、画的结果显示出来paint();
示例：
jg.paint();
以上的画图代码，直到这个语句时才显示出来。
16、清除画板clear();
示例：
jg.clear();
17、设为可打印的
setprintable(true);
示例：
jg.setprintable(true);
如果没有设置可打印，则画出来的图像打印不出来。设为true后，paint出来的图才能打印出来。如果设为false，则这部分paint的就不能打印了。而文字与图像不管如何设置，都可以打印出来。
示例的html文件
1 <html> 2 <head> 3 <title>test</title> 4 <script language="javascript" src="wz_jsgraphics.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <input id="butdraw" value="draw" type="button" onclick="butdraw_click();" /> 8 <div id="test" style="color:blue; left: 0px; overflow: visible; 400px; position: relative; top: 0px; height: 250px;background:#eeeeee; "></div> 9 <script type="text/javascript"> 10 var jg=new jsGraphics("test"); 11 function butdraw_click() 12 { 13 if (window.event) event.cancelbubble = true; 14 jg.setColor("#ff00ff"); 15 jg.setStroke(1); 16 jg.setPrintable(false); 17 jg.drawLine(10, 10, 100, 100); 18 var xpoints = new Array(10, 85, 93, 60); 19 var ypoints = new Array(50, 10, 105, 87); 20 jg.drawPolyLine(xpoints, ypoints); 21 jg.setStroke(3); 22 jg.drawRect(20, 50, 70, 140); 23 jg.setColor("blue"); 24 jg.fillRect(24, 54, 65, 135); 25 var xpoints = new Array(10, 85, 33, 20); 26 var ypoints = new Array(50, 30, 105, 87); 27 jg.drawPolygon(xpoints, ypoints); 28 jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87)); 29 jg.drawEllipse(20, 50, 70, 140); 30 jg.drawOval(20, 50, 70, 70); 31 jg.fillEllipse(20, 50, 71, 141); 32 jg.fillOval(20, 50, 71, 141); 33 jg.fillArc(20, 20, 40, 40, 220.0, 270.0); 34 jg.setFont("arial","15px",Font.ITALIC_BOLD); 35 jg.setFont("arial", "15px", Font.PLAIN); 36 jg.drawString("some text", 20, 50); 37 jg.drawRect(20, 50, 300, 140); 38 jg.setFont("verdana", "11px", Font.BOLD); 39 jg.drawStringRect("text", 20, 50, 300, "right"); 40 jg.drawImage("but04.gif", 20, 50); 41 jg.paint(); 42 //jg.clear(); 43 } 44 </script> 45 </body> 46 </html>