在js中初始化canvas对象。onShow(){this.initCanvas();},//初始化画布initCanvas(){constc=this.$refs.canvas;this.ctx=c.getContext('2d',{antialias:true});},2.画出九个密码点我们看下面的草图：从草图中，我们可以看到我们密码点的位置。这里我们使用for循环的方式来实现，创建3条线，每条线有3个点。这里有一个需要注意的地方，因为我们的密码点有一个需要用手势移动，需要修改point_list的数据，所以我们使用point_list_copy复制一份，这里使用es6..的扩展运算符.实现深拷贝。//创建9个密码点createPoint(){letpoint_x=Math.ceil((this.w-this.R*6)/4+this.R);让point_y=Math.ceil((this.h-this.R*6)/4+this.R);for(varj=0;j<3;j++){for(vari=0;i<3;i++){让d={x:point_x*(i+1)+this.R*i,y:point_y*(j+1)+this.R*j}this.point_list.push(d);this.point_list_copy=[...this.point_list];这个.drawPoint(d)；}}}，以下实现在画布上指向9个密码。//在画布上绘制9个密码点drawPoint(obj){let{x,y}=obj;//绘制外圈this.ctx.beginPath();this.ctx.lineCap="圆形";//将圆形线帽添加到线的每一端this.ctx.lineWidth=(this.R/2);//绘制圆的边界this.ctx.strokeStyle='#ff9800';//绘制边框的颜色this.ctx.arc(x,y,this.R,0,2*Math.PI);this.ctx.stroke();this.ctx.closePath();//绘制内圆this.ctx.beginPath();this.ctx.arc(x,y,this.R,0,2*Math.PI);this.ctx.fillStyle="#383838";这个.ctx.fill();this.ctx.closePath();},看一下绘制后的效果：3.监听手势和密码点的碰撞。我们在TouchStart上写了三个手势事件。TouchMove上的触摸变化。触摸结束onTouchEnd。onTouchStart(e){让x=e.touches[0].localX;让y=e.touches[0].localY;this.isCollision(x,y)},onTouchMove(e){让x=e.touches[0].localX;让y=e.touches[0].localY;this.isCollision(x,y);//每次触摸后，画布都需要清空重绘this.ctx.clearRect(0,0,this.w,this.h);this.reDraw(x,y,true);},onTouchEnd(e){this.ctx.clearRect(0,0,this.w,this.h);this.reDraw(e.touches[0].clientX,e.touches[0].clientY,false);//松开手后，记录所有触摸点lg.log('patternresult:',this.result)this.result=[];},重绘画布：//重绘reDraw(x,y,bol){for(letiinthis.point_list){//重绘9个代码点this.drawPoint(this.point_list[i]);}for(letiinthis.result){//重绘密码状态this.drawStatus(this.result[i]);}},监听手势触摸是否与密码点碰撞。this.scope表示热区的范围。当触摸点进入热区范围时，即表示触摸点与密码点发生了碰撞。//是否与9个密码点联系。isCollision(x,y){让c_x,c_y;for(letiinthis.point_list){c_x=Math.abs(x-this.point_list[i].x);c_y=Math.abs(y-this.point_list[i].y);//如果发生碰撞，记录状态if(c_x