利用 wz_jsgraphics.js 画线

参考: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>

原文地址:https://www.cnblogs.com/pricks/p/1669728.html