js+canvas实现可自动吸附闭合的鼠标绘制多边形
更新时间:2022年07月15日 12:00:22 作者:hst❀
这篇文章主要为大家详细介绍了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 = []; }); /*验证canvas画布是否为空函数*/ function isCanvasBlank(canvas) { var blank = document.createElement('canvas');//创建一个空canvas对象 blank.width = canvas.width; blank.height = canvas.height; return canvas.toDataURL() == blank.toDataURL();//为空 返回true } /*canvas生成圆点*/ 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实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox
用js实现终止浏览器对页面HTML的继续解析即停止解析 兼容firefox...2007-11-11
最新评论