canvas实现手机的手势解锁的步骤详细 html5 canvas手势解锁源码分享h5使用canvas画布实现手势解锁

 body{background:pink;text-align: center;}

 // 匿名函数自执行 (function(){ // canvasLock是全局对象 window.canvasLock=function(obj){ this.width=obj.width; this.height=obj.height; } //动态生成DOM canvasLock.prototype.initDom=function(){ //创建一个div var div=document.createElement("div"); var h4="
绘制解锁图案
"; div.innerHTML=h4; div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;"); //创建canvas var canvas=document.createElement("canvas"); canvas.setAttribute("id","canvas"); //cssText 的本质就是设置 HTML 元素的 style 属性值 canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;"; div.appendChild(canvas); document.body.appendChild(div); //设置canvas默认宽高 var width=this.width||300; var height=this.height||300; canvas.style.width=width+"px"; canvas.style.height=height+"px"; canvas.width=width; canvas.height=height; } //init代表初始化，程序的入口 canvasLock.prototype.init=function(){ //动态生成DOM this.initDom(); //创建画布 this.canvas=document.getElementById("canvas"); this.ctx=this.canvas.getContext("2d"); } })();

 new canvasLock({}).init();

 //以给定坐标点为圆心画出单个圆 canvasLock.prototype.drawCircle=function(x,y){ this.ctx.strokeStyle="#abcdef"; this.ctx.lineWidth=2; this.ctx.beginPath(); this.ctx.arc(x,y,this.r,0,2*Math.PI,true); this.ctx.closePath(); this.ctx.stroke(); } //绘制出所有的圆 canvasLock.prototype.createCircle=function(){ var n=this.circleNum;//一行几个圆 var count=0; this.r=this.canvas.width/(4*n+2);//公式计算出每个圆的半径 this.lastPoint=[];//储存点击过的圆的信息 this.arr=[];//储存所有圆的信息 this.restPoint=[];//储存未被点击的圆的信息 var r=this.r; for(var i=0;i

 canvasLock.prototype.init=function(){ //动态生成DOM this.initDom(); //创建画布 this.canvas=document.getElementById("canvas"); this.ctx=this.canvas.getContext("2d"); //绘制出所有的圆 this.createCircle(); }

 new canvasLock({circleNum:3}).init();

 canvasLock.prototype.getPosition=function(e){ var rect=e.currentTarget.getBoundingClientRect();//获得canvas距离屏幕的上下左右距离 var po={ //鼠标与视口的左距离 - canvas距离视口的左距离 = 鼠标与canvas的左距离 x:(e.touches[0].clientX-rect.left), //鼠标与视口的上距离 - canvas距离视口的上距离 = 鼠标距离canvas的上距离 y:(e.touches[0].clientY-rect.top) }; return po; }

 this.canvas.addEventListener("touchstart",function(e){ var po=self.getPosition(e);//鼠标距离canvas的距离 //判断是否在圆内 for(var i=0;i

 //触摸点移动时的动画 canvasLock.prototype.update=function(po){ //清屏，canvas动画前必须清空原来的内容 this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); //以给定坐标点为圆心画出所有圆 for(var i=0;i

 //碰到下一个圆时只需要push到lastPoint当中去 for(var i=0;i

 //设置密码 canvasLock.prototype.storePass=function(){ if(this.checkPass()){ document.getElementById("title").innerHTML="解锁成功"; this.drawStatusPoint("lightgreen"); }else{ document.getElementById("title").innerHTML="解锁失败"; this.drawStatusPoint("orange"); } } //判断输入的密码 canvasLock.prototype.checkPass=function(){ var p1="123",//成功的密码 p2=""; for(var i=0;i

 // 匿名函数自执行 (function(){ // canvasLock是全局对象 window.canvasLock=function(obj){ this.width=obj.width; this.height=obj.height; this.circleNum=obj.circleNum; } //动态生成DOM canvasLock.prototype.initDom=function(){ //创建一个div var div=document.createElement("div"); var h4="
绘制解锁图案
"; div.innerHTML=h4; div.setAttribute("style","position:absolute;top:0;left:0;right:0;bottom:0;"); //创建canvas var canvas=document.createElement("canvas"); canvas.setAttribute("id","canvas"); //cssText 的本质就是设置 HTML 元素的 style 属性值 canvas.style.cssText="background:pink;display:inine-block;margin-top:15px;"; div.appendChild(canvas); document.body.appendChild(div); //设置canvas默认宽高 var width=this.width||300; var height=this.height||300; canvas.style.width=width+"px"; canvas.style.height=height+"px"; canvas.width=width; canvas.height=height; } //以给定坐标点为圆心画出单个圆 canvasLock.prototype.drawCircle=function(x,y){ this.ctx.strokeStyle="#abcdef"; this.ctx.lineWidth=2; this.ctx.beginPath(); this.ctx.arc(x,y,this.r,0,2*Math.PI,true); this.ctx.closePath(); this.ctx.stroke(); } //绘制出所有的圆 canvasLock.prototype.createCircle=function(){ var n=this.circleNum;//一行几个圆 var count=0; this.r=this.canvas.width/(4*n+2);//公式计算出每个圆的半径 this.lastPoint=[];//储存点击过的圆的信息 this.arr=[];//储存所有圆的信息 this.restPoint=[];//储存未被点击的圆的信息 var r=this.r; for(var i=0;i