JavaScript图形库jsGraphics

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>