用HTML5制作屏幕手势解锁功能

时间2024-01-23 01:47:03发布访客分类HTML浏览694

导读：收集整理的这篇文章主要介绍了用HTML5制作屏幕手势解锁功能，觉得挺不错的，现在分享给大家，也给大家做个参考。随着时代的发展，HTML5深受一些人喜爱，在开发过程中也是必不可少的一种编程语言。HTML5本身是由W3C推荐出来的，它的开发是通...

收集整理的这篇文章主要介绍了用HTML5制作屏幕手势解锁功能，觉得挺不错的，现在分享给大家，也给大家做个参考。随着时代的发展，HTML5深受一些人喜爱，在开发过程中也是必不可少的一种编程语言。HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。本节内容我们就讲讲用HTML5制作屏幕手势解锁功能教程。

实现原理利用HTML5的canvas，将解锁的圈圈划出，利用touch事件解锁这些圈圈，直接看代码。

function createCircle() {
    // 创建解锁点的坐标，根据canvas的大小来平均分配半径         VAR n = chooseTyPE;
    // 画出n*n的矩阵         lastPoint = [];
            arr = [];
            restPoint = [];
            r = ctx.canvas.width / (2 + 4 * n);
    // 公式计算 半径和canvas的大小有关        for (var i = 0 ;
     i  n ;
 i++) {
                for (var j = 0 ;
     j  n ;
 j++) {
                arr.push({
                    x: j * 4 * r + 3 * r,                    y: i * 4 * r + 3 * r                }
    );
                restPoint.push({
                    x: j * 4 * r + 3 * r,                    y: i * 4 * r + 3 * r                }
    );
            }
        }
            //return arr;
    }

canvas里的圆圈画好之后可以进行事件绑定

function bindEvent() {
        can.addEventListener("touchstart", function (e) {
                 var po = getPosITion(e);
                 console.LOG(po);
                 for (var i = 0 ;
     i  arr.length ;
 i++) {
                    if (Math.abs(po.x - arr[i].x)  r &
    &
 Math.abs(po.y - arr[i].y)  r) {
     // 用来判断起始点是否在圈圈内部                     touchFlag = true;
                        drawPoint(arr[i].x,arr[i].y);
                        lastPoint.push(arr[i]);
                        restPoint.splice(i,1);
                        break;
                }
             }
         }
    , false);
         can.addEventListener("touchmove", function (e) {
            if (touchFlag) {
                    update(getPosition(e));
            }
         }
    , false);
         can.addEventListener("touchend", function (e) {
             if (touchFlag) {
                     touchFlag = false;
                     StorePass(lastPoint);
                 setTimeout(function(){
                         init();
                }
    , 300);
             }
          }
    , false);
    }

接着到了最关键的步骤绘制解锁路径逻辑，通过touchmove事件的不断触发，调用canvas的moveTo方法和lineto方法来画出折现，同时判断是否达到我们所画的圈圈里面，其中lastPoint保存正确的圈圈路径，restPoint保存全部圈圈去除正确路径之后剩余的。 Update方法：

function update(po) {
    // 核心变换方法在touchmove时候调用        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
             for (var i = 0 ;
     i  arr.length ;
 i++) {
     // 每帧先把面板画出来            drawCle(arr[i].x, arr[i].y);
        }
             drawPoint(lastPoint);
    // 每帧花轨迹        drawLine(po , lastPoint);
    // 每帧画圆心         for (var i = 0 ;
     i  restPoint.length ;
 i++) {
                if (Math.abs(po.x - restPoint[i].x)  r &
    &
 Math.abs(po.y - restPoint[i].y)  r) {
                    drawPoint(restPoint[i].x, restPoint[i].y);
                    lastPoint.push(restPoint[i]);
                    restPoint.splice(i, 1);
                    break;
            }
        }
     }

最后就是收尾工作，把路径里面的lastPoint保存的数组变成密码存在localstorage里面，之后就用来处理解锁验证逻辑了function storePass(psw) { // touchend结束之后对密码和状态的处理

     if (pswObj.step == 1) {
            if (checkPass(pswObj.fpassword, psw)) {
                    pswObj.step = 2;
                    pswObj.spassword = psw;
                    document.getElementById('title').innerHTML = '密码保存成功';
                    drawstatusPoint('#2CFf26');
                    window.localStorage.setItem('passwordx', JSON.stringify(pswObj.spassword));
                    window.localStorage.setItem('chooseType', chooseType);
            }
 else {
                    document.getElementById('title').innerHTML = '两次不一致，重新输入';
                    drawStatusPoint('red');
                    delete pswObj.step;
            }
        }
 else if (pswObj.step == 2) {
            if (checkPass(pswObj.spassword, psw)) {
                    document.getElementById('title').innerHTML = '解锁成功';
                    drawStatusPoint('#2CFF26');
            }
 else {
                    drawStatusPoint('red');
                    document.getElementById('title').innerHTML = '解锁失败';
            }
        }
 else {
                pswObj.step = 1;
                pswObj.fpassword = psw;
                document.getElementById('title').innerHTML = '再次输入';
        }
     }

解锁组件

将这个HTML5解锁写成了一个组件，放在https://github.COM/LVMing6816077/H5lock

以上就是如何用HTML5来实现解锁功能教程，大家可以动手实践一下。