canvas画布绘制跟随鼠标移动的直线

Qin__

已于 2022-10-27 17:23:06 修改

阅读量1.3k

点赞数

分类专栏：前端学习文章标签： javascript 前端 html

于 2022-10-27 17:22:51 首次发布

本文链接：https://blog.csdn.net/Uookic/article/details/127556764

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

效果图如下:
在这里插入图片描述
代码如下：

<body>
    <div style="background-color: #ccc;width: 400px"><canvas id="canvas"></canvas></div>
    <script>
        $(function() {
            var startdraw = false;
            var point = {
                x: 0,
                y: 0
            };
            var drawCanvas = document.getElementById('canvas');
            var ctx = drawCanvas.getContext('2d');
            drawCanvas.width = 400;
            drawCanvas.height = 300;

            var canvasOffset = $('#canvas').offset();
            var arrlines = [];
            var arr = [];
            $('#canvas').mousemove(function(e) {
                if (startdraw) {
                    ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
                    
                    ctx.strokeStyle = 'blue';
                    ctx.lineWidth = 1;
                    ctx.beginPath();


                    if (arrlines.length > 0) {
                        for (var i = 0; i < arrlines.length; i++) {
                            var p = arrlines[i];
                            ctx.moveTo(p[0].x, p[0].y);
                            ctx.lineTo(p[1].x, p[1].y);
                            ctx.stroke();
                        }
                    }

                    ctx.moveTo(point.x, point.y);
                    ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                    ctx.stroke();
                }
            });

            $('#canvas').mousedown(function(e) {
                ctx.beginPath();
                point = {
                    x: e.pageX - canvasOffset.left,
                    y: e.pageY - canvasOffset.top
                }
                arr.push(point);
                startdraw = true;
            });

            $(window).mouseup(function(e) {
                startdraw = false;
                var obj = {
                    x: e.pageX - canvasOffset.left,
                    y: e.pageY - canvasOffset.top
                };
                arr.push(obj);
                arrlines.push(arr);
                arr = [];
                console.log(arrlines);
            });
        });


    </script>

</body>