h5使用canvas画布实现手势解锁

相关代码

//设置解锁密码和解锁测试
function settingUnlockPwd() {
if (pwd.length <= 0) {
pwd = puts;
init();
$("header").text("再次绘制解锁图案");
} else if (confirmPwd.length <= 0) {
confirmPwd = puts;
}
console.log(pwd + " " + confirmPwd);
//笔记两次密码是否正确
if (pwd.length > 0 && confirmPwd.length > 0) {
if (compareArr(pwd, confirmPwd)) {
$("header").text("解锁图案绘制成功");
init();
} else {
$("header").text("两次绘制的解锁图案不一致");
init();
confirmPwd = [];
}
}
}
//解锁
function unlock() {
console.log("解锁密码：" + puts + " " + confirmPwd);
if (compareArr(puts, confirmPwd)) {
$("header").text("解锁成功!页面跳转中......");
} else {
$("header").text("解锁图案不正确！！！");
init();
}
}
$("footer").click(function() {
if ($(this).text() === "解锁") {
unlockFlag = true;
init();
$("header").text("绘制解锁图案");
}
});
//比较两个数组（Number）是否相等
function compareArr(arr1, arr2) {
return arr1.toString() === arr2.toString();
}

后记

本文完整 demo 在线演示地址