验证手势时失效

来源：2-5 canvas实现解锁成功-canvas案例

KD_35

2018-04-24 19:46:29

<!DOCTYPE html>
<html>
    <head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				background-color: #305066;
				text-align: center;
			}
			h4{
            color: #22C3AA;
        }
		</style>
	</head>
	<body>
	<!-- 此处填写代码创建canvas标签 -->
	<script type="text/javascript" src="js/test.js"></script>
    <script>
    	new canvasLock({chooseType:3}).init();
    		
    	//此处填写代码
	    //此处填写代码
	</script>
	</body>
	
</html>

(function(){
	window.canvasLock=function(obj){
		this.height=obj.height;
		this.width=obj.width;
		this.chooseType=obj.chooseType;
	}
	// 程序初始化
	canvasLock.prototype.init=function(){
		this.initDom();
		this.canvas=document.getElementById('canvas');
		this.ctx=canvas.getContext('2d');
		this.createCircle();
		this.bindEvent();
	}
	// 画布
	canvasLock.prototype.initDom=function(){
		var wrap=document.createElement('div');
		var str='<h4 id="title" class="title">绘制解锁图案</h4>';
		wrap.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;");
		
		var canvas=document.createElement('canvas');
		canvas.setAttribute('id','canvas');
		canvas.style.cssText="background-color: #305066;display: inline-block;margin-top: 15px;"
		wrap.innerHTML=str;
		wrap.appendChild(canvas);

		var width=this.width||300,
		height=this.height||300;

		document.body.appendChild(wrap);

		canvas.style.width=width+"px";
		canvas.style.height=height+"px";

		canvas.width=width;
		canvas.height=height;
	}

	//创造圆的圆形，半径
	canvasLock.prototype.createCircle=function(){
		var n=this.chooseType;
		var count=0;
		this.r=this.ctx.canvas.width/(2+4*n);
		this.arr=[];
		this.lastPoint=[];
		this.restPoint=[];
		var r=this.r;
		for(var i=0;i<n;i++){
			for(var j=0;j<n;j++){
				var obj={
					x:j*4*r+3*r,
					y:i*4*r+3*r,
					index: count
				};
				this.arr.push(obj);
				this.restPoint.push(obj);
			}
		}
		this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
		for(var i=0;i<this.arr.length;i++){
			this.drawCle(this.arr[i].x,this.arr[i].y);
		}
		
	}

	//画圆
	canvasLock.prototype.drawCle=function(x,y){
		this.ctx.lineWidth=2;
		this.ctx.beginPath();
		this.ctx.strokeStyle="#CFE6FF";
		this.ctx.arc(x,y,this.r,0,Math.PI*2,true);
		this.ctx.stroke();	
	}

	//事件函数
	canvasLock.prototype.bindEvent=function(){
		var self=this;
		// 按压事件，获取位置
		this.canvas.addEventListener("touchstart",function(e){
			// touchustart判断点击位置是够在圆内
			var po=self.getPosition(e);
			for(var i=0;i<self.arr.length;i++){
				if(Math.abs(po.x-self.arr[i].x)<self.r &&Math.abs(po.y-self.arr[i].y)<self.r){
					self.touchFlag=true;
					// 存放小圆心的数组
					self.lastPoint.push(self.arr[i]);
					// self.restPoint.splice(i,1);
					break;
				}
			}
		},false)//设置为false在冒泡过程中执行函数

		this.canvas.addEventListener("touchmove",function(e){
			if(self.touchFlag){
				self.update(self.getPosition(e));
			}
		},false)

		this.canvas.addEventListener("touchend",function(e){
			if(self.touchFlag){
				self.storePass();//
				setTimeout(function(){
					self.reset();
				},300)
			}
		},false);
	}

	// 获取新的touch点相对canvas的做坐标
	canvasLock.prototype.getPosition=function(e){
		var rect=e.currentTarget.getBoundingClientRect();//当前点击所在的画布
		var po={
			x:(e.touches[0].clientX-rect.left),
			y:(e.touches[0].clientY-rect.top)
		};
		return po;
	}

	canvasLock.prototype.update=function(po){
		this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height);
		for(var i=0;i<this.arr.length;i++){
			this.drawCle(this.arr[i].x,this.arr[i].y);
		}
		this.drawPoint();
		this.drawLine(po);
		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]);//移动到哪个点就把数组添到lastpoint
				this.restPoint.splice(i,1);
				break;
			}
		}
	}

	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.drawLine=function(po){
		this.ctx.beginPath();
		this.ctx.lineWidth=3;
		this.ctx.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);
		for(var i=0;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.storePass=function(){
		 if (this.checkPass()) {
                document.getElementById('title').innerHTML = '解锁成功';
                this.drawStatusPoint('#2CFF26');
            }else{
                document.getElementById('title').innerHTML = '解锁失败';
                this.drawStatusPoint('red');
            }
	}
	//判断是否正确
	canvasLock.prototype.checkPass=function(){
		var p1="123",
		p2="";
		for(var i=0;i<this.lastPoint.length;i++){
			p2+=this.lastPoint[i].index;
			console.log(this.lastPoint[i].index);
		}
		return p1===p2;
	}


	canvasLock.prototype.drawStatusPoint=function(type){
		for(var i=0;i<this.lastPoint.length;i++){
			this.ctx.strokeStyle = type;
            this.ctx.beginPath();
            this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
		}
	}

	canvasLock.prototype.reset=function(){
		this.createCircle();
	}

})()

检查发现this.lastPoint[i].index值都为0，所以密码验证永远是错的，不知道什么原因

写回答

1回答