实现canvas连线

如图：

简单说明下，每个点都可以连接，但是不能重复连接同一个点，当连接到最后一个点的时候，会自动连接第一个点（首尾相连）。

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

画点

使用数组保存点的位置，遍历数组将点画出来

 1 var points = [{x: 300,y: 98, isConnect: false},{x: 217,y: 264, isConnect: false},{x: 295,y: 359, isConnect: false},{x: 372,y: 508, isConnect: false},{x: 511,y: 385, isConnect: false},{x: 497,y: 203, isConnect: false}]
 2
 3 function drawPoint () {
 4   for (var i = 0, len = points.length; i < len; i++) {
 5       ctx.save()
 6       ctx.beginPath()
 7       ctx.arc(points[i].x, points[i].y, 10, 0, 2 * Math.PI)
 8       ctx.fill()
 9       ctx.restore()
10   }
11 }

View Code

画线

画线这部分涉及到交互，所以我们需要添加事件，设置drawing，当点击的时候才能开始画线

 1 var mouse = { //用来保存鼠标移动的位置
 2       start: {x: 0, y: 0},
 3       end: {x: 0, y: 0}
 4     }
 5 var drawing = false; //判断是否可以画线
 6     function drawLine (pos1, pos2) {
 7       ctx.save()
 8       ctx.beginPath()
 9       ctx.moveTo(pos1.x, pos1.y)
10       ctx.lineTo(pos2.x, pos2.y)
11       ctx.stroke()
12       ctx.closePath()
13       ctx.restore()
14     }
15
16     canvas.addEventListener('mousedown', function(e) {
17
18       mouse.start.x = e.pageX
19       mouse.start.y = e.pageY
20       drawing = true
21     })
22
23     canvas.addEventListener('mousemove', function(e) {
24
25       mouse.end.x = e.pageX
26       mouse.end.y = e.pageY
27       ctx.clearRect(0, 0, canvas.width, canvas.height) //清除画布
28 29       if (drawing) {
30         drawLine(mouse.start, mouse.end)
31       }
32
33     })

“吸附”点

我们现在是可以在任意一点开始画线，但是我们的需求是，靠近某个点才能开始画线

怎么判断靠近某个点呢？使用勾股定理，计算两点的距离（一个点是原点，另一个点是鼠标位置）小于一个值(dis)时，我们判定被这个点“吸附”了，然后开始画线。

写一个方法计算距离：

1 function distance (pos1, pos2) {
2   return Math.sqrt(Math.pow(pos1.x - pos2.x, 2) + Math.pow(pos1.y - pos2.y, 2))
3 }

判断是否被”吸附“, 并且”吸附“过的点不能再连接：

 1 function adsorption (mouse) {
 2
 3    for (var i = 0, len = points.length; i < len; i++) {
 4
 5       if (!points[i].isConnect && distance(mouse, points[i]) <= dis) {
 6
 7           points[i].isConnect = true
 8           drawing = true
 9
10       }
11
12    }
13 }
14 ...
15 //修改下事件
16 // canvas.addEventListener('mousedown', function(e) {17
18 //   mouse.start.x = e.pageX
19 //   mouse.start.y = e.pageY
20
21  // })
22
23 canvas.addEventListener('mousemove', function(e) {
24
25   mouse.end.x = e.pageX
26   mouse.end.y = e.pageY
27   ctx.clearRect(0, 0, canvas.width, canvas.height)
28   adsorption(mouse.end)
29   drawPoint()
30   if (drawing) {
31     drawLine(mouse.start, mouse.end)
32   }
33
34 })

到这里，鼠标靠近点的时候，就可以画线了，但是并不是我们预想的那样，应该从点开始画线

这是因为在drawLine传值的是mouse.start，我们只需要把mouse.start换成点的位置就可以了，那么如何换成点的位置呢？

可以用一个数组保存连接过的点：

 1 var savePoints = []
 2 ...
 3 //修改adsorption
 4 function adsorption (mouse) {
 5
 6    for (var i = 0, len = points.length; i < len; i++) {
 7
 8       if (!points[i].isConnect && distance(mouse, points[i]) <= dis) {
 9
10           points[i].isConnect = true
11           drawing = true
12           savePoints.push(points[i])
13
14      }
15
16    }
17 }
18 ...
19 //修改mouse事件
20 canvas.addEventListener('mousemove', function(e) {
21
22       ...
23       if (drawing) {
24         drawLine(savePoints[savePoints.length - 1], mouse.end)
25       }
26
27 })

我们发现每次靠近一个点的时候，都是从这个点开始连线的，之前连接的线并没有画出来，clearRect清除了之前连的线

可以利用保存过的点，把之前连过的线画出来：

 1  ...
 2  function drawOldLine () {
 3    for (var i = 0, len = savePoints.length - 1; i < len; i++) {
 4      drawLine(savePoints[i], savePoints[i + 1])
 5    }
 6 }
 7 ...
 8 //修改mousemove事件
 9 ...
10 if (_this.drawing) {
11
12    ...
13    drawOldLine()
14
15 }

好了，我们可以看到，每个点都可以连接，跟我们预想的一样，现在就差最后一步了

首尾相连，简单的思路就是，保存过的数组savePoints里的第一个点和最后一个点连线：

1 function autoLine () {
2       ctx.clearRect(0, 0, canvas.width, canvas.height)
3       drawOldLine()
4       drawPoint()
5       drawLine(savePoints[savePoints.length - 1], savePoints[0])
6       drawing = false
7 }

到这里，已经完成了连线功能。

大家可以尝试一下封装成插件，以后可以方便地使用以及拓展。

转载于:https://www.cnblogs.com/Zhongxk/p/10197538.html

实现canvas连线相关推荐

html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
react + canvas点线动画背景
效果图实现步骤 1.public文件夹中的index.html引入 2.将变量存起来 // 引入 <script src='./Dot.js'></script> // 变量 ...
实现js动态创建img并使用canvas画线连接
实现js动态创建img,使用canvas画线连接img,当背景图更换时,重新绘制img及连接线. 前台页面 @{ Layout = null; } <!DOCTYPE html> ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
canvas画线变粗变模糊的解决办法
自己写的小例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
Canvas - 画线
文章目录画线使用鼠标画线参考画线 <!DOCTYPE html> <html><head><meta charset="utf-8" ...

实现canvas连线

实现canvas连线相关推荐

最新文章

热门文章