这篇文章主要介绍“怎么使用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实现可自动吸附闭合的鼠标绘制多边形”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
