HTML5实现屏幕手势解锁网赌正规网站网址

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卡塔尔(英语:State of Qatar);// 每帧花轨迹 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卡塔尔国卡塔尔(英语:State of Qatar);
window.localStorage.setItem(‘chooseType’, chooseType卡塔尔国; } else {
document.getElementById(‘title’卡塔尔.innerHTML = ‘五次差别等,重新输入’;
drawStatusPoint(‘red’卡塔尔(英语:State of Qatar); delete pswObj.step; } } else if (pswObj.step ==
2卡塔尔国 { if (checkPass(pswObj.spassword, psw卡塔尔国卡塔尔 {
document.getElementById(‘title’卡塔尔(英语:State of Qatar).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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图