canvas实现手机的手势解锁的步调具体

凭证国际老例，先放结果图

1、js动态初始化Dom布局

起首在index.html中添加根基样式

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

加个移动端meta头

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

引入index.js剧本

<script src=http://www.jb51.net/html5/"index.js"></script>

index.js

// 匿名函数自执行 (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="<h4>绘制解锁图案</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"); } })();

在index.html中建设实例并初始化

new canvasLock({}).init();

结果图

2、 画圆函数

必要增补一下画布宽度与圆的半径的相关

假如一行3个圆，则有4个间距，间距的宽度与圆的直径沟通，相等于7个直径，即14个半径

假如一行4个圆，则有5个间距，间距的宽度与圆的直径沟通，相等于9个直径，即18个半径

假如一行n个圆，则有n+1个间距，间距的宽度与圆的直径沟通，相等于2n+1个直径，即4n+2个半径

增补两个要领：

//以给定坐标点为圆心画出单个圆 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<n;i++){ for(var j=0;j<n;j++){ count++; var obj={ x:(4*j+3)*r, y:(4*i+3)*r, index:count//给每个圆标志索引 }; this.arr.push(obj); this.restPoint.push(obj);//初始化时为全部点 } } //清屏 this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); //以给定坐标点为圆心画出全部圆 for(var i=0;i<this.arr.length;i++){ //轮回挪用画单个圆的要领 this.drawCircle(this.arr[i].x,this.arr[i].y); } }

初始化的时辰记得挪用

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

别忘了在index.html中实例化时传入参数（一行界说几个圆）

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

结果图

3、canvas变乱操纵——实现画圆和画线

getPosition要领用来获得鼠标触摸点离canvas的间隔（左边和上边）

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

给canvas添加 touchstart 变乱，判定触摸点是否在圆内

触摸点在圆内则应承拖拽，并将该圆添加到 lastPoint 中，从 restPoint 中剔除

this.canvas.addEventListener("touchstart",function(e){ var po=self.getPosition(e);//鼠标间隔canvas的间隔 //判定是否在圆内 for(var i=0;i<self.arr.lenth;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);

判定是否在圆内的道理：

圆心的x轴偏移和鼠标点的x轴偏移的间隔的绝对值小于半径

而且

圆心的y轴偏移和鼠标点的y轴偏移的间隔的绝对值小于半径

则可以判定鼠标位于圆内

给touchmove绑定变乱，在触摸点移动时给点击过的圆画上实心圆，并画线

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!