怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形

2023-07-02 18:07:45 416人浏览安东尼

摘要

这篇文章主要介绍“怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形”文章能帮助大

这篇文章主要介绍“怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形”文章能帮助大家解决问题。

效果图：

怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形

完整代码：（记得引入Jquery）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>canvas绘制多边形</title>    <script src="jQuery.js"></script></head><body><style>    canvas {        border: 1px solid #333;        display: block;    }    input {        width: 100px;        margin-left: 200px;        margin-top: 650px;    }    #canvas{        position: absolute;        left: 0;        top: 0;        z-index: 1;        cursor: crosshair;    }    #canvasSave{        position: absolute;        left: 0;        top: 0;    }</style><!--用来和鼠标进行交互操作的canvas--><canvas id="canvas" width="1000px" height="600px"></canvas><!--存储已生成的点线，避免被清空--><canvas id="canvasSave" width="1000px" height="600px"></canvas><input id="deleteCanvas" type="button" value="清空选区"><script>    var can = document.getElementById("canvas");    var ctx = can.getContext('2d');    var canSave = document.getElementById("canvasSave");    var ctxSave = canSave.getContext('2d');    var pointX, pointY;    var pointArr = [];//存放坐标的数组    ctx.strokeStyle = 'rgba(102,168,255,1)';//线条颜色    ctx.lineWidth = 4;//线条粗细    ctxSave.strokeStyle = 'rgba(102,168,255,1)';//线条颜色    ctxSave.lineWidth = 4;//线条粗细    var oIndex = -1;//判断鼠标是否移动到起始点处，-1为否，1为是        $(can).click(function (e) {        if (e.offsetX || e.layerX) {            pointX = e.offsetX == undefined ? e.layerX : e.offsetX;            pointY = e.offsetY == undefined ? e.layerY : e.offsetY;            var piX,piY;            if(oIndex > 0 && pointArr.length > 0){                piX = pointArr[0].x;                piY = pointArr[0].y;                //画点                makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');                pointArr.push({x: piX, y: piY});                canvasSave(pointArr);//保存点线同步到另一个canvas                saveCanvas();//生成画布            }else {                piX = pointX;                piY = pointY;                makearc(ctx, piX, piY, GetRandomNum(2, 2), 0, 180, 'rgba(102,168,255,1)');                pointArr.push({x: piX, y: piY});                canvasSave(pointArr);//保存点线同步到另一个canvas            }        }    });        $(can).mousemove(function (e) {        if (e.offsetX || e.layerX) {            pointX = e.offsetX == undefined ? e.layerX : e.offsetX;            pointY = e.offsetY == undefined ? e.layerY : e.offsetY;            var piX,piY;                        ctx.clearRect(0, 0, can.width, can.height);                        makearc(ctx, pointX, pointY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');            if (pointArr.length > 0) {                if((pointX > pointArr[0].x-15 && pointX < pointArr[0].x+15) && (pointY > pointArr[0].y-15 && pointY < pointArr[0].y+15)){                    if(pointArr.length>1){                        piX = pointArr[0].x;                        piY = pointArr[0].y;                        ctx.clearRect(0, 0, can.width, can.height);                        makearc(ctx, piX, piY, GetRandomNum(4, 4), 0, 180, 'rgba(102,168,255,1)');                        oIndex = 1;                    }                }else {                    piX = pointX;                    piY = pointY;                    oIndex = -1;                }                                ctx.beginPath();                ctx.moveTo (pointArr[0].x, pointArr[0].y);                if (pointArr.length > 1){                    for (var i = 1; i < pointArr.length; i++){                        ctx.lineTo(pointArr[i].x, pointArr[i].y);                    }                }                ctx.lineTo(piX, piY);                ctx.fillStyle = 'rgba(161,195,255,1)';//填充颜色                ctx.fill();//填充                ctx.stroke();//绘制            }        }    });    // 存储已生成的点线    function canvasSave(pointArr){        ctxSave.clearRect(0, 0, ctxSave.width, ctxSave.height);        ctxSave.beginPath();        if (pointArr.length > 1){            ctxSave.moveTo (pointArr[0].x, pointArr[0].y);            for (var i = 1; i < pointArr.length; i++){                ctxSave.lineTo(pointArr[i].x, pointArr[i].y);                ctxSave.fillStyle = 'rgba(161,195,255,1)';//填充颜色                //ctxSave.fill();                ctxSave.stroke();//绘制            }            ctxSave.closePath();        }    }        function saveCanvas() {        ctx.clearRect(0, 0, can.width, can.height);        ctxSave.closePath();//结束路径状态，结束当前路径，如果是一个未封闭的图形，会自动将首尾相连封闭起来        ctxSave.fill();//填充        ctxSave.stroke();//绘制        pointArr = [];    }        $('#deleteCanvas').click(function () {        ctx.clearRect(0, 0, can.width, can.height);        ctxSave.clearRect(0, 0, canSave.width, canSave.height);        pointArr = [];    });        function isCanvasBlank(canvas) {        var blank = document.createElement('canvas');//创建一个空canvas对象        blank.width = canvas.width;        blank.height = canvas.height;        return canvas.toDataURL() == blank.toDataURL();//为空 返回true    }        function GetRandomNum(Min, Max) {        var Range = Max - Min;        var Rand = Math.random();        return (Min + Math.round(Rand * Range));    }    function makearc(ctx, x, y, r, s, e, color) {        ctx.clearRect(0, 0, 199, 202);//清空画布        ctx.beginPath();        ctx.fillStyle = color;        ctx.arc(x, y, r, s, e);        ctx.fill();    }</script></body></html>

关于“怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么使用js+canvas实现可自动吸附闭合的鼠标绘制多边形

本文链接: https://www.lsjlt.com/news/343615.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341