本案例的再次提问，主要是圆实现的思路不太懂以及closePath()

        canvasLock.prototype.update = function(po) {// 核心变换方法在touchmove时候调用
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

            // 重新画9个圆圈
            for (var i = 0 ; i < this.arr.length ; i++) { // 每帧先把面板画出来
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }

            this.drawPoint();// 画圆
            this.drawLine(po);// 画线

            // 1、检测手势移动的位置是否处于下一个圆内
            // 2、圆内的话则画圆 drawPoint
            // 3、已经画过实心圆的圆，无需重复检测
            for (var i = 0 ; i < this.restPoint.length ; i++) {
                if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
                    this.drawPoint();
                    this.lastPoint.push(this.restPoint[i]);
                    this.restPoint.splice(i, 1);
                    break;
                }
            }

            console.log(this.lastPoint)

        }

我的理解是所有的圆找到经过手指经过的圆，然后this.drawPoint();画出来。for (var i = 0 ; i < this.restPoint.length……这段代码就是在所有未经过的圆（this.restPoint）中执行this.drawPoint();并对数组进行操作，但是this.drawPoint();是对所有（this.lastPoint）经过的圆进行操作，这个逻辑就混乱了

问题1：我知道如何做到touchmove事件中经过多个圆就画多个圆，但是如何做到经过的圆不再重复绘制不太清楚逻辑，请老师根据我思路错误的地方指正，并告诉我正确思路？

this.drawPoint();出现两次也是不理解？

       canvasLock.prototype.drawLine = function(po) {// 解锁轨迹
            this.ctx.beginPath();
            this.ctx.lineWidth = 3;
            this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
            for (var i = 1 ; i < this.lastPoint.length ; i++) {
                this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
            }
            this.ctx.lineTo(po.x, po.y);
            this.ctx.stroke();
            this.ctx.closePath();
        }
        canvasLock.prototype.drawPoint = function() { // 初始化圆心 
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.fillStyle = '#CFE6FF';
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
                canvasLock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }

问题2：closePath()在画圆、画空心圆、画线都出现了，为什么？（老师之前解释说影响别的效果，可是我百度的结果是只有闭合路径的效果，在这里不需要）

https://class.imooc.com/course/qadetail/198564

问题3：closePath()函数与beginPath();函数几乎应该是没有关系啊，老师为什么如链接一样解释，理解为配套使用呢？

https://class.imooc.com/course/qadetail/144472