效果展示
实现原理
利用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             for (var j = 0 ; 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                 if (math.abs(po.x - arr[i].x)
                    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             drawcle(arr[i].x, arr[i].y);
        }
drawpoint(lastpoint);// 每帧花轨迹
        drawline(po , lastpoint);// 每帧画圆心
for (var i = 0 ; i             if (math.abs(po.x - restpoint[i].x)                 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
转载自alloyteam：http://www.alloyteam.com/2015/07 ... u-shou-shi-jie-suo/