一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情
需求：
在图片上使用canvas画布圈定区域。并且可以点击撤销（回退到上一步，类似ctrl+z）、恢复（反撤销，类似ctrl+shift+Z）、清除（清除画布）、完成（将当前的点和点一个点相连，完成封闭区域，至少需要两个点才能使用此功能）等功能实现思路。
初始化：
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的功能封装成类。在组件中直接初始化赋值这个类，点击按钮调用类中的方法来实现这个功能，以上是一些伪代码，实现思路。可以自行用代码实现^ ^
