实现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 = { //用来保存鼠标移动的位置