canvas画布圈定区域、撤销和恢复、清除、完成功能的实现

需求：在一定区域内使用canvas画布圈定区域。并且可以点击撤销、恢复、清除、完成等功能实现思路。

初始化：points=[] 画面上点数

                allPoints=[]  总点数

                step=-1      步数（操作次数  ）

                isEnded=false 结束标记，判断是否完成了圈定操作

鼠标点击圈定区域：

1.points.push（x,y）当前的坐标

2.step++

3.allPoints=points，即allPoints也增加当前的点

4.清除画布，吧当前points的点连成线

5.如果当前三个点或者以上，最后点的坐标=第一个点，isEnd=true

撤销（step>0的情况下）

1.step- -

2.points.pop() points数组删除最后一个画在画布上的点

3.清除画布，把当前points的点连线

恢复（step<allPoints.length-1的情况下,即撤销过才能有恢复操作）

1.step++

2.points.push(allPoints[step])

3.清除画布，把当前points的点连线

完成：页面>=三个点，并且没有连成区域的时候可以操作

1.points.push(points[0])，吧第一个点添加进到数组里面

2.allPoints=points，同步总点数的数组

3.step++，isEnded=true

3.清除画布，把当前points的点连线，涂色连城区域

清除：清空当前画布上的点

1.points.splice(0) 置空points数组

2.allPoints=points，置空allPoints数组

3.step=-1， isEnded=false

4.清除画布

建议：将canvas的功能封装成类。在组件中直接初始化赋值这个类，点击按钮调用类中的方法来实现这个功能

            以前是一些伪代码，实现思路。可以自行用代码实现^ ^