欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

canvas实现鼠标划线

程序员文章站 2024-02-25 18:17:51
...

canvas实现鼠标划线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <canvas id="my" width="1000" height="700" style="border: 1px solid #f00;"></canvas>

    </body>
    <script type="text/javascript">
    var c = document.getElementById("my");
    var ctx = c.getContext("2d");

    c.onmousedown = function(e){
        var e = e ||event;
        var ox = e.clientX -c.offsetLeft;
        var oy = e.clientY - c.offsetTop;
        ctx.moveTo(ox,oy);

        document.onmousemove = function(e){
            var ox2 = e.clientX -c.offsetLeft;
            var oy2 = e.clientY - c.offsetTop;
            ctx.lineTo(ox2,oy2);
            ctx.stroke();
        }

        document.onmouseup  = function(e){
            document.onmousemove =null;
            document.onmouseup = null;
        }
    }

    </script>
</html>