参考：http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
=====================
<html>
<head>
<title>利用 wz_jsgraphics.js 画线</title>
<script src="wz_jsgraphics.js" type="text/javascript"></script>
<script language=javascript>
var IsDrawLine = "0";
//
var StartX = 0;
var StartY = 0;
var EndX = 0;
var EndY = 0;
var jgdiv1;
function fn_WantDrawLine()
{
IsDrawLine = "1";
}
function fn_onmousedown()
{
if(IsDrawLine=="1")
{
//起点
StartX = event.x;
StartY = event.y;
document.all.Text1.value = StartX;
document.all.Text2.value = StartY;
//
jgdiv1.drawLine(StartX,StartY,StartX,StartY);
jgdiv1.paint();
}
}
function fn_onmousemove()
{
if(IsDrawLine=="1")
{
if(StartX!=0)
{
//终点
EndX = event.x;
EndY = event.y;
document.all.Text3.value = EndX;
document.all.Text4.value = EndY;
// //
// jgdiv1.drawLine(StartX,StartY,EndX,EndY);
// jgdiv1.paint();
}
}
}
function fn_onmouseup()
{
if(IsDrawLine=="1")
{
//画线
jgdiv1.drawLine(StartX,StartY,EndX,EndY);
jgdiv1.paint();
//
IsDrawLine = "0";
document.all.Text1.value = "";
document.all.Text2.value = "";
document.all.Text3.value = "";
document.all.Text4.value = "";
StartX = 0;
StartY = 0;
}
}
document.onmousedown = fn_onmousedown;
document.onmousemove = fn_onmousemove;
document.onmouseup = fn_onmouseup;
</SCRIPT>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" onclick="fn_WantDrawLine();" value="画线" />
<input id="Text1" type="text" /><input id="Text2" type="text" />
<input id="Text3" type="text" /><input id="Text4" type="text" />
<div id="div1" style="400; height:400; border:solid 1px #1C5E55;">
<script>
jgdiv1 = new jsGraphics("div1");
jgdiv1.setColor("#cc0000");
jgdiv1.setStroke(10);
</script>
</div>
</form>
</body>
</html>