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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript动画之磁性吸附效果篇
前面的话 上一篇,我们介绍了javascript动画之模拟拖拽效果篇.但在实际应用中,常常需要为拖拽的元素限定范围.而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果 范围限定 如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定 首先,先要搞清楚是可视区域限定被拖拽元素 左侧范围L0 = 0 右侧范围R0 = document.documentElement.clientWidth 上侧范围T0 = 0 下侧范围B0 = document.documentElemen
-
如何用threejs实现实时多边形折射
前言 在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃. 渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观. 可以使用Three.js之类的库中的现成程序来模仿许多类型的材料,但是在本教程中,我将向您展示如何使用三个对象(三个步骤)使对象看起来像玻璃一样. 步骤1:设定和正面折射 在本演示中,我将使用菱形几何图形,但是您可以跟随一个简单的盒子或任何其他几何图形. 让我们建立我们的项目.我们需要一个渲染器
-
js实现磁性吸附的示例
磁性吸附 目录 代码实例 与限定范围拖拽的差异 下载源码链接 代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height: 500px; background: #999; position: relative; left: 100px; top: 100px; } #box { width: 100px; height: 100px; background: #334; position: absolute; cursor: m
-
javascript实现多边形碰撞检测
javascript多边形碰撞检测 原理就是 循环每个顶点判断是不是在多边形内 const app = new PIXI.Application({ antialias: true }); document.body.appendChild(app.view); const graphics = new PIXI.Graphics(); // draw polygon const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];
-
js+canvas实现可自动吸附闭合的鼠标绘制多边形
本文实例为大家分享了js+canvas实现鼠标绘制多边形的具体代码,可自动吸附闭合,供大家参考,具体内容如下 效果图: 完整代码:(记得引入jQuery) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制多边形</title> <script src=&quo
-
js+canvas实现网站背景鼠标吸附线条动画
本文实例为大家分享了js+canvas实现网站背景鼠标吸附线的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> ! function
-
使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂懂,到现在学着开始写github.写博客,其实技术上没有太多可写的,毕竟自己也才刚刚入门,只能说是按照自己的兴趣,写点有意思的小项目,项目上存在的问题,也希望大神能够予以指正,目前这个demo的功能已经实现,后期我会对样式.代码等方面进行优化. 项目运行效果: 项目简介:使用原生js+canvas制
-
Android自定义View实现自动吸附功能
本文实例为大家分享了Android实现自动吸附功能的具体代码,供大家参考,具体内容如下 1.简述 最近开发app过程中要实现拖动view后要可以自动吸附功能,所以需要自定义view来在onTouchEvent中来利用动画来实现此功能 2.功能代码部分 import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.util.Log; i
-
js+canvas实现纸牌游戏
本文实例为大家分享了js+canvas实现纸牌游戏的具体代码,供大家参考,具体内容如下 废话不多说,先上地址 运行截图 最后如果完成了会有结束动画,我技术比较渣,难以玩到结束,就不上完成动画截图了. 游戏介绍 好吧,可能有些好学生在做上机实验时没有玩纸牌游戏,所以容我介绍一下这个游戏,这个游戏是win7自带的一个纸牌类游戏,游戏规则是:将牌按一定的规则码放,最终将所有的牌牌面朝上胜利.有两个地方可以用来码牌,上:以A开头,即将码放的牌的花色相同,且牌面值比原来的牌面大1,则可以码放成功:下:以K
-
基于JS+Canvas的lucky-canvas 抽奖功能
目录 ucky-canvas 介绍 lucky-canvas 功能特点 自由配置 多端适配 响应式 代码块展示 效果图展示 代码如下 抽奖一 抽奖二 抽奖三 ucky-canvas 介绍 一个基于 Js + Canvas 的[大转盘 & 九宫格 & 老虎机]抽奖, 致力于为 web 前端提供一个功能强大且专业可靠的组件, 只需要通过简单配置即可实现自由化定制, 帮助你快速的完成产品需求. lucky-canvas 功能特点 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置
-
JS+Canvas实现自定义头像功能
目录 写在最前 成果展示 Git地址 功能说明 实现细节 相关依赖 写在最后 写在最前 前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去“允许”falsh的运行.所以让我用canvas实现一个一样的功能,嘿嘿,刚好最近也在研究canvas,所以欣然答应(其实,你没研究过难道就不答应么,哈哈哈哈哈~) 成果展示 Git地址 https://github.com/ry928330/portraitDIY.git 功能说明 拖拽左侧小方框,或者是鼠标放在小方框右
-
JS+Canvas实现满屏爱心和文字动画的制作
目录 介绍 步骤 介绍 <canvas> 最早由 Apple 引入 WebKit,用于 Mac OS X 的 Dashboard,随后被各个浏览器实现.如今,所有主流的浏览器都支持它.Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式.它可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面.Canvas 适合绘制大数据量图形元素的图表(如热力图.地理坐标系或平行坐标系上的大规模线图或散点图等),也适合实
-
JS+canvas动态绘制饼图的方法示例
本文实例讲述了JS+canvas动态绘饼图的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas饼状图</title> </head> <body> <canvas id=
-
Js日期选择器并自动加入到输入框中示例代码
复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> var gMonths=new Array("一月&