在http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm找到一个javascript的画图库。
相关的函数调用说明如下：
设置画笔颜色
setColor("#HexColor");
示例：
jg.setColor("#ff0000");
或
jg.setColor("red");
如果没有设置画笔颜色，则默认用黑色来画。
参数缺少时会出错。参数为非颜色值时也会出错（防错这一块，该库做得不是非常完善）。
设置画笔宽度
setStroke(Number);
示例：
jg.setStroke(3);
或
jg.setStroke(Stroke.DOTTED); //点线
如果没有设置画笔宽度，默认是1点宽。宽度是指从一边到另一边的点数，设为3，就是准准的3点
，而不是5点。Stroke.DOTTED为虚线，线的宽度为1。Stroke.DOTTED也可以用-1来代替，其它负
值时，都是1点实线。
画线
drawLine(X1, Y1, X2, Y2);
示例：
jg.drawLine(20, 50, 453, 40);
如果后面的一个点坐标没有提供，不会出错，但结果不一定正确，只能设点模式为Stroke.DOTTED
时，相当于画一个点，而其它的，则会跑到Y轴上。
画折线
drawPolyline(Xpoints, Ypoints);
示例：
var Xpoints = new Array(10, 85, 93, 60);
var Ypoints = new Array(50, 10, 105, 87);
jg.drawPolyline(Xpoints, Ypoints);
如果X坐标与Y坐标数量不匹配，不会出错，但不匹配的点画不出线，只画出杂乱的点。
画框
drawRect(X, Y, width, height);
示例：
jg.drawRect(20, 50, 70, 140);
实际宽度是width+pixel，而不是width+2*pixel。中间空白的宽度是width-pixel。顶点不管线宽
，总是(X, Y)。
后面宽度与高度缺少，画出几个杂乱的点。
填充区域
fillRect(X, Y, width, height);
示例：
jg.fillRect(20, 50, 453, 40);
与drawRect不同，实际宽度就是width。
以下画出两种颜色的框，中间还带一像素的背景色。
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
画任意多边形（封闭折线）
drawPolygon(Xpoints, Ypoints);
示例：
var Xpoints = new Array(10, 85, 93, 20);
var Ypoints = new Array(50, 10, 105, 87);
jg.drawPolygon(Xpoints, Ypoints);
如果参数中最后一个点不匹配，则画出折线，而不封闭。
填充任意多边形
fillPolygon(Xpoints, Ypoints);
示例：
jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87));
不错，这都能正确地填充好。
画椭圆
drawEllipse(X, Y, width, height);
示例：
jg.drawEllipse(20, 50, 70, 140);
或
jg.drawOval(20, 50, 70, 140);
要画圆，则是宽与高一样就行。
填充椭圆
fillEllipse(X, Y, width, height);
示例：
jg.fillEllipse(20, 50, 71, 141);
或
jg.fillOval(20, 50, 71, 141);
画弧
fillArc(X, Y, width, height, start-angle, end-angle);
示例：
jg.fillArc(20, 20, 41, 12, 270.0, 220.0);
总是从前面的角度顺时针转到后面的角度，即使前面的角度大于后面的角度
设置字体
setFont("font-family", "size+unit", Style);
输出文字
drawString("Text", X, Y);
示例：
jg.setFont("arial", "15px", Font.ITALIC_BOLD);
jg.drawString("Some Text", 20, 50);
字体样式有以下几种值：PLAIN、BOLD、ITALIC、ITALIC_BOLD、BOLD_ITALIC
固定区域输出文字
drawStringRect("Text", X, Y, Width, Alignment);
示例：
jg.setFont("verdana", "11px", Font.BOLD);
jg.drawStringRect("Text", 20, 50, 300, "right");
Alignment的内容就是CSS中text-align的内容：left、right、center、justify
输出图像文件
drawImage("src", X, Y, width, height);
示例：
jg.drawImage("Dog.jpg", 20, 50, 100, 150);
如果有宽度与高度，就会把图像拉长或压缩，如果没有，则显示图像的原大。
画的结果显示出来
paint();
示例：
jg.paint();
以上的画图代码，直到这个语句时才显示出来。
清除画板
clear();
示例：
jg.clear();
设为可打印的
setPrintable(true);
示例：
jg.setPrintable(true);
如果没有设置可打印，则画出来的图像打印不出来。设为true后，paint出来的图才能打印出来。
如果设为false，则这部分paint的就不能打印了。而文字与图像不管如何设置，都可以打印出来
。
示例的HTML文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<script language="javascript" src="wz_jsgraphics.js" type="text/javascript"></script>
</head>
<body>
<input id="ButDraw" value="Draw" type="button" onclick="ButDraw_Click();" />
<div id="test" style="color:blue; LEFT: 0px; OVERFLOW: visible; WIDTH: 400px; POSITION: relative; TOP: 0px; HEIGHT: 250px;
background:#EEEEEE; "></DIV>
<script type="text/javascript">
var jg=new jsGraphics("test");
function ButDraw_Click()
{
if (window.event) event.cancelBubble = true;
jg.setColor("#FF00FF");
jg.setStroke(1);
jg.setPrintable(false);
jg.drawLine(10, 10, 100, 100);
var Xpoints = new Array(10, 85, 93, 60);
var Ypoints = new Array(50, 10, 105, 87);
jg.drawPolyline(Xpoints, Ypoints);
jg.setStroke(3);
jg.drawRect(20, 50, 70, 140);
jg.setColor("blue");
jg.fillRect(24, 54, 65, 135);
var Xpoints = new Array(10, 85, 33, 20);
var Ypoints = new Array(50, 30, 105, 87);
jg.drawPolygon(Xpoints, Ypoints);
jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87));
jg.drawEllipse(20, 50, 70, 140);
jg.drawOval(20, 50, 70, 70);
jg.fillEllipse(20, 50, 71, 141);
jg.fillOval(20, 50, 71, 141);
jg.fillArc(20, 20, 40, 40, 220.0, 270.0);
jg.setFont("arial", "15px", Font.ITALIC_BOLD);
jg.drawString("Some Text", 20, 50);
jg.drawRect(20, 50, 300, 140);
jg.setFont("verdana", "11px", Font.BOLD);
jg.drawStringRect("Text", 20, 50, 300, "right");
jg.drawImage("but04.gif", 20, 50);
jg.paint();
//jg.clear();
}
</script>
</body>
</html>