canvas 鼠标绘制任意多边形形状

最新推荐文章于 2024-05-08 15:18:16 发布

M18771556987

最新推荐文章于 2024-05-08 15:18:16 发布

阅读量6.4k

点赞数

分类专栏： FE canvas

本文链接：https://blog.csdn.net/weixin_36878452/article/details/86534497

版权

FE 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="canvas-box" style="width: 1080px; height: 1920px;padding-left: 100px;"> 
        <canvas id="cvs" width="1080" height="1920">不支持canvas</canvas>
    </div>
    <script type="text/javascript">
        
        var cvs = document.getElementById("cvs");
        var cvsClientRect = cvs. getBoundingClientRect();
        var points = [];

        cvs.addEventListener("mousedown", mousedownHandler, false);
        var ctx = cvs.getContext('2d');
        var flag = false;

        function mousedownHandler (event){
            if(event.button == 0 && !flag) {
                points.push({
                    x: event.pageX - cvsClientRect.x,
                    y: event.pageY - cvsClientRect.y
                });
                if(points.length>=1) {
                    cvs.addEventListener("mousemove", mousemoveHandler, false);
                }
                drawPolygon(points);
            } else if(event.button === 2) {
                flag = true;
                cvs.removeEventListener("mousemove", mousemoveHandler);
            }
        }

        function drawPolygon(points) {
            ctx.clearRect(0,0,1080,1920);

            ctx.strokeStyle = '#000';
            ctx.beginPath();
            ctx.moveTo(points[0].x,points[0].y);
            for(var i=1;i<points.length;i++) {
              ctx.lineTo(points[i].x,points[i].y);
            }
            ctx.closePath();
            ctx.stroke();
        }

        function mousemoveHandler(event) {
            drawPolygon(points.concat({
                x: event.pageX - cvsClientRect.x,
                y: event.pageY - cvsClientRect.y
            }));
        }
    </script>
</body>
</html>

特别提醒 getBoundingClientRect().x, getBoundingClientRect().y

M18771556987

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
10
评论
canvas 鼠标绘制任意多边形形状

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; pad...
复制链接

扫一扫

专栏目录