首頁 > 開發者 > JavaScript
一個例子: 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實現畫點, 其他的都是利用畫點畫出來的 1function _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
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
