点击不能实现画圆划线

来源：2-3 canvas事件操作

chenqianguan

2018-05-08 09:28:53

(function(){
	window.canvasLock= function(obj){
		this.height = obj.height;
		this.width = obj.width;
		this.chooseType = obj.chooseType;
	};
	//动态生成dom
	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;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;
		var 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.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();
	}
	canvasLock.prototype.createCircle =function(){//创建解锁点的坐标，根 
		var n = this.chooseType;
		var count = 0;
		this.r = this.ctx.canvas.width/(2+4*n);//公式计算
		this.lastPoint = [];
		this.arr = [];
		this.restPoint = [];
		var r = this.r;
		for(var i = 0 ; i<n; i++){
			for(var j=0; j<n; j++){
				count++;
				var obj = {
					x:j*4*r+3*r,
					y:i*4*r+3*r,
					index:count
				};
				this.arr.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.init= function(){
		this.initDom();
		this.canvas = document.getElementById('canvas');
		this.ctx = this.canvas.getContext('2d');

		//1.确定半径
		//2.确定每个圆心坐标
		//3.14个半径一行 
		this.createCircle();
		this.bindEvent();
	}
	canvasLock.prototype.bindEvent = function(){
		var self = this;

		this.canvas.addEventListener("touchstart",function(e){
			//判断点击的位置是否在圆内
			//lastpoint, 

			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);

		this.canvas.addEventListener("touchmove",function(e){
			console.log(111)
			if(self.touchFlag){
				self.update(self.getPositon(e));
			}
		},false);

		this.canvas.addEventListener("touchend",function(e){},false);

		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);//
		}
		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(){
			//
			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();
		};

	}
})();

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Document</title>
<style>
body{
text-align: center;
background: #305066;
color
}
h4{
color: #22c3aa;
}
</style>
</head>
<body>

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
//1.生成背景
//2.动态title生成
//3.用js动态生成canvas
//4.用js动态生成h3和
new canvasLock({chooseType:3}).init();
</script>
</body>
</html>

写回答

2回答