canvas实现鼠标划线

最新推荐文章于 2023-04-08 21:18:37 发布

sweetllh

最新推荐文章于 2023-04-08 21:18:37 发布

阅读量5.2k

点赞数 5

分类专栏： html5 canvas

本文链接：https://blog.csdn.net/sweetllh/article/details/73188850

版权

html5 同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

canvas

3 篇文章 0 订阅

订阅专栏

这里写图片描述

<!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>

sweetllh

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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;"></can
复制链接

扫一扫