html5如何实现手势解锁

2024-10-26 技术教程

本文小编为大家详细介绍“html5如何实现手势解锁”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5如何实现手势解锁”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

原生实现还是其它方式实现？

1、使用 android 和 ios 对应的平台通过原生代码来写手势解锁插件。体验好，但是开发周期长，需要处理各平台的兼容性问题，并且需要学习apicloud平台插件编写方法。（放弃）

2、使用 html5 的 canvas 画布来实现。开发周期短，不需要过多的处理兼容性问题，体验好。（选择）

原理分析

手势解锁

通过手指将屏幕上的九个点依次连接起来形成一个图案，所以叫图案解锁。如上图每一个解锁圆圈后面其实都是一个数字，每次比较的并不是是用户画出来的图案，而是每次手指经过图案时串联起来的圆圈下的数字组成的密码字符串，本质上我们比较的还是字符串的密码，只不过站在用户的角度看是绘制出来的图案。图案的记忆远比数字字符串记的牢固。

实现步骤

绘制密码盘

密码盘的绘制比较简单，唯一需要注意需要通过动态计算使九个点围成的正方式始终在屏幕的中间位置，在手机上还需要减去状态栏的高度。

varwidth=$(document).width();varheight=$(document).height()-40;//减去手机状态栏的高度//九宫格其实就是九个点，9个点的坐标对象varlockCicle={x:0,//x坐标y:0,//y坐标color:"#999999",state:"1"//状态当前点是否已经被链接过};varoffset=(width-height)/2;//计算偏移量vararr=[];//九个点的坐标数组//计算九个点坐标的方法for(vari=1;i<=3;i++){//每一行for(varj=1;j<=3;j++){//每一行的每一个varlockCicle={};//横屏if(offset>0){lockCicle.x=(height/4)*j+Math.abs(offset);lockCicle.y=(height/4)*i;lockCicle.state=0;//竖屏}else{lockCicle.x=(width/4)*j;lockCicle.y=(width/4)*i+Math.abs(offset);lockCicle.state=0;}arr.push(lockCicle);}}//初始化界面的方法functioninit(){ctx.clearRect(0,0,width,height);//清空画布pointerArr=[];//清楚绘制路径for(vari=0;i<arr.length;i++){arr[i].state=0;//清除绘制状态drawPointer(i);}}//绘制九宫格解锁界面functiondrawPointer(i){ctx.save();varradius=0;if(hastouch){radius=width/12;}else{radius=24;}var_fillStyle="#dd514c";var_strokeStyle="#dd514c";//不同状态显示不同颜色if(arr[i].state==1){_strokeStyle="#1bd6c5";}//绘制原点ctx.beginPath();ctx.fillStyle=_fillStyle;ctx.arc(arr[i].x,arr[i].y,6,0,Math.PI*2,false);ctx.fill();ctx.closePath();//绘制圆圈ctx.beginPath();ctx.strokeStyle=_strokeStyle;ctx.lineWidth=0.3;ctx.lineCap="round";ctx.lineJoin="round";ctx.arc(arr[i].x,arr[i].y,radius,0,Math.PI*2,false);ctx.stroke();ctx.closePath();ctx.restore();}//初始化界面init();

绘制连线

绘制连线的方法

varpointerArr=[];//连接线点的坐标数组varstartX,startY;//线条起始点varputs=[];//经过的九个点的数组varcurrentPointer;//当前点是否已经连接varpwd=[];//密码varconfirmPwd=[];//确认密码varunlockFlag=false;//是否解锁的标志/****绘制链接线的方法，将坐标数组中的点绘制在canvas画布中**/functiondrawLinePointer(x,y,flag){ctx.clearRect(0,0,width,height);ctx.save();ctx.beginPath();ctx.strokeStyle="#1bd6c5";ctx.lineWidth=5;ctx.lineCap="round";ctx.lineJoin="round";for(vari=0;i<pointerArr.length;i++){if(i==0){ctx.moveTo(pointerArr[i].x,pointerArr[i].y);}else{ctx.lineTo(pointerArr[i].x,pointerArr[i].y);}}ctx.stroke();ctx.closePath();ctx.restore();for(vari=0;i<arr.length;i++){drawPointer(i);//绘制圆圈和原点if(ctx.isPointInPath(x,y)&&currentPointer!=i){//判断鼠标点击是否在圆中pointerArr.push({x:arr[i].x,y:arr[i].y});currentPointer=i;puts.push(i+1);startX=arr[i].x;startY=arr[i].y;arr[i].state=1;}}if(flag){ctx.save();ctx.beginPath();ctx.globalCompositeOperation="destination-over";ctx.strokeStyle="#e2e0e0";ctx.lineWidth=5;ctx.lineCap="round";ctx.lineJoin="round";ctx.moveTo(startX,startY);ctx.lineTo(x,y);ctx.stroke();ctx.beginPath();ctx.restore();}}

绑定事件

连线的过程就是将 3 个 touch（移动端）事件组合起来获取当前位置的坐标放入数组中，然后将这些坐标渲染到界面上的过程。

touchstart (mousedown) 当手指（鼠标）按下时设置 isMouseDown=true，同时将该点的坐标保存到线条数组中，并将数组中的点绘制出来。

touchmove (mousemove) 当 isMouseDown=true 时将手指（鼠标）移动过程中所有的坐标点都保存到萧条数组中，并将数组中的点绘制出来。

mouseup (mouseup) 当手指（鼠标）松开后设置 isMouseDown=fasle.将数组中的所有点绘制出来，清空 pointerArr 数组，然后比较连接的点的数量如果小于 6（自己设置，一般密码 6 位以上）给一个密码长度不够的提示，清空 puts 数组，重新调用 init 方法初始化界面，如果大于等于 6 则密码设置成功。

//兼容移动触摸的事件写法varhastouch="ontouchstart"inwindow?true:false,tapstart=hastouch?"touchstart":"mousedown",tapmove=hastouch?"touchmove":"mousemove",tapend=hastouch?"touchend":"mouseup";//绑定按下事件lockCnavs.addEventListener(tapstart,function(e){isMouseDown=true;varx1=hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;vary1=hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;drawLinePointer(x1,y1,true);});//移动时候，将经过的坐标点全部保存起来lockCnavs.addEventListener(tapmove,function(e){if(isMouseDown){varx1=hastouch?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft;vary1=hastouch?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop;drawLinePointer(x1,y1,true);}});//取消lockCnavs.addEventListener(tapend,function(e){drawLinePointer(0,0,false);isMouseDown=false;pointerArr=[];if(puts.length>=6){alert("你的图案密码是:["+puts.join(">")+"]");if(unlockFlag){//解锁unlock();}else{//设置解锁密码settingUnlockPwd();}}else{if(puts.length>=1){alert("你的图案密码太简单了~~~");init();}}puts=[];});

实现解锁逻辑

通过上面几步的操作，九宫格解锁每一次绘图之后的数据和显示效果都有了，现在只需要在关键地方添加相应逻辑代码就可以了，这里主要介绍它的实现逻辑就不对代码做封装了。