您的位置:澳门402永利com > 前端技术 > H5达成显示屏手势解锁,HTML5兑现荧屏手势解锁

H5达成显示屏手势解锁,HTML5兑现荧屏手势解锁

发布时间:2019-10-03 00:00编辑:前端技术浏览(111)

    HTML5实现屏幕手势解锁

    2015/07/18 · HTML5 · 1 评论 · 手势解锁

    原文出处: AlloyTeam   

    效果展示

    图片 1

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

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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里的圆圈画好之后可以进行事件绑定

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    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方法:

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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里面,之后就用来处理解锁验证逻辑了

    JavaScript

    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 = '再次输入'; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    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解锁写成了一个组件,放在

    二维码体验: 图片 2

     

    参考资料:

    1 赞 4 收藏 1 评论

    图片 3

    图片 4

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

    functioncreateCircle(){// 创建解锁点的坐标,根据canvas的大小来平均分配半径

    varn = chooseType;// 画出n*n的矩阵

    lastPoint = [];

    arr = [];

    restPoint = [];

    r = ctx.canvas.width / (2+4* n);// 公式计算 半径和canvas的大小有关

    for(vari =0; i < n ; i++) {

    for(varj =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里的圆圈画好之后可以进行事件绑定

    functionbindEvent(){

    can.addEventListener("touchstart",function(e){

    varpo = getPosition(e);

    console.log(po);

    for(vari =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方法:

    functionupdate(po){// 核心变换方法在touchmove时候调用

    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);

    for(vari =0; i < arr.length ; i++) {// 每帧先把面板画出来

    drawCle(arr[i].x, arr[i].y);

    }

    drawPoint(lastPoint);// 每帧花轨迹

    drawLine(po , lastPoint);// 每帧画圆心

    for(vari =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里面,之后就用来处理解锁验证逻辑了

    functionstorePass(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');

    deletepswObj.step;

    }

    }elseif(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 ='再次输入';

    }

    }

    本文由澳门402永利com发布于前端技术,转载请注明出处:H5达成显示屏手势解锁,HTML5兑现荧屏手势解锁

    关键词:

上一篇:拖拽上传前传,拖拽异步上传实现

下一篇:没有了