javascript画图函数库jsgraphics

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#docu

一个例子:

 1 < html >< head >
 2
 3 < script  type ="text/javascript"  src ="wz_jsgraphics.js" ></ script >
 4 </ head >
 5 < body  bgcolor ="#ffffff"  onload ="" >
 6 < p  id ="myCanvas" >   </ p >
 7
 8 < script  type ="text/javascript" >
 9
10function myDrawFunction()
11{
12  jg_doc.setColor("#00ff00"); // green
13  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
14  jg_doc.setColor("maroon");
15  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
16  jg_doc.paint(); // draws, in this case, directly into the document
17
18  jg.setColor("#ff0000"); // red
19  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
20  jg.setColor("#0000ff"); // blue
21  jg.fillRect(110, 120, 30, 60);
22  jg.paint();
23
24  jg2.setColor("#0000ff"); // blue
25  jg2.drawEllipse(10, 50, 30, 100);
26  jg2.drawRect(400, 10, 100, 50);
27  jg2.paint();
28}
29
30//var jg_doc = new jsGraphics(); // draw directly into document
31var jg_doc = new jsGraphics("myCanvas");
32
33myDrawFunction();
34
35 </ script >  
36
37 </ body ></ html >

它的实现方法是用div实现画点, 其他的都是利用画点画出来的

 1 function _mkDiv(x, y, w, h)
 2 {
 3     this.htm += ' < div  style ="position:absolute;'+
 4         'left:' + x + 'px;'+
 5         'top:' + y + 'px;'+
 6         'width:' + w + 'px;'+
 7         'height:' + h + 'px;'+
 8         'clip:rect(0,'+w+'px,'+h+'px,0);'+
 9         'background-color:' + this.color +
10         (!jg_moz? ';overflow:hidden' : '')+
11         ';" >< \/div > ';
12 }
13
14 function _mkDivIe(x, y, w, h)
15 {
16     this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';
17 }

里面还有一个tooltip库 和 dragdrop库
http://www.walterzorn.com/tooltip/tooltip_e.htm
http://www.walterzorn.com/dragdrop/dragdrop_e.htm