JavaScript图形库Raphaël < JavaScript图形库jsGraphics > AWT、SWING与SWT、JFACE比较
此JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形(包括三角形、矩形)。底层通过创建大量1px*1px的DIV实现,同时对于连续的像素进行了优化,尽量地减少所需的DIV,因此有较好的性能,当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是无法相比较的。网站:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm 。使用LGPL协议发布。
1、效果:
2、优化原理:
支持的浏览器:
Linux: Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror, Opera 5, 6 and 7+.
Windows: Gecko-Browsers, IE 4, 5 and 6, Opera 5, 6 and 7+.
Mac: Safari, Gecko-Browsers, Opera, partially IE.
使用方法:
1、下载,并在页面中引入脚本:<script type="text/javascript" src="wz_jsgraphics.js"></script>
2、创建一个Div作为画布:<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
3、在JavaScript中创建对象:
- <script type="text/javascript">
- <!--方法一:
- var jg = new jsGraphics("myCanvas");
- //-->
- </script>
- <script type="text/javascript">
- <!--方法二:
- var cnv = document.getElementById("myCanvas");
- var jg = new jsGraphics(cnv);
- //-->
- </script>
4、例子:
- <script type="text/javascript">
- <!--
- function myDrawFunction()
- {
- jg_doc.setColor("#00ff00"); // green
- jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
- jg_doc.setColor("maroon");
- jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
- jg_doc.paint(); // draws, in this case, directly into the document
- jg.setColor("#ff0000"); // red
- jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
- jg.setColor("#0000ff"); // blue
- jg.fillRect(110, 120, 30, 60);
- jg.paint();
- jg2.setColor("#0000ff"); // blue
- jg2.drawEllipse(10, 50, 30, 100);
- jg2.drawRect(400, 10, 100, 50);
- jg2.paint();
- }
- var jg_doc = new jsGraphics(); // draw directly into document
- var jg = new jsGraphics("myCanvas");
- var jg2 = new jsGraphics("anotherCanvas");
- myDrawFunction();
- //-->
- </script>