js+canvas实现可自动吸附闭合的鼠标绘制多边形
更新时间:2022年7月15日 10:04 点击:709 作者:hst❀
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/HuangsTing/article/details/103984266
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20