一个例子:
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>
<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
10
function myDrawFunction()11
{
12
jg_doc.setColor("#00ff00"); // green13
jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document14
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 document17
18
jg.setColor("#ff0000"); // red19
jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"20
jg.setColor("#0000ff"); // blue21
jg.fillRect(110, 120, 30, 60);22
jg.paint();23
24
jg2.setColor("#0000ff"); // blue25
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 document31
var jg_doc = new jsGraphics("myCanvas");32
33
myDrawFunction();34
35
</script> 36
37
</body></html>它的实现方法是用div实现画点, 其他的都是利用画点画出来的
1function _mkDiv(x, y, w, h)
2{
3 this.htm += '<div style="position:absolute;'+
4 'left:' + x + 'px;'+
5 'top:' + y + 'px;'+
6 '' + 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
14function _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
function _mkDiv(x, y, w, h)2
{3
this.htm += '<div style="position:absolute;'+4
'left:' + x + 'px;'+5
'top:' + y + 'px;'+6
'' + 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