【JavaScript学习笔记】画图

2023-01-08 18:28:47
<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            var prex,prey;
            var flag=0;
            function start(t,e)
            {
                t.style.cursor="crosshair";
                prex=e.clientX;
                prey=e.clientY;
                flag=1;
            }
            function stop()
            {
                flag=0;
            }
            function draw(t,e)
            {
                t.style.cursor="crosshair";
                document.getElementById("x").innerHTML=e.clientX;
                document.getElementById("y").innerHTML=e.clientY;
                if (flag==1)
                {
                    var c=document.getElementById("myCan").getContext("2d");
                    c.moveTo(prex,prey);
                    c.lineTo(e.clientX,e.clientY);
                    c.stroke();
                    prex=e.clientX;
                    prey=e.clientY;
                }
            }
            function getOut()
            {
                flag=0;
            }
        </script>
    </head>

    <body>
        <canvas id="myCan"
            style="border:1px solid #000000" width="256" height="256"
            onmousemove="draw(this,event)"
            onmouseout="getOut()"
            onmousedown="start(this,event)"
            onmouseup="stop()">
        </canvas>
        <p id="x"></p>
        <p id="y"></p>
    </body>

</html>
码农公寓

相关文章
