建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹怎么使用HTML5制作屏幕手勢(shì)解鎖功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
10年積累的網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有府谷免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
實(shí)現(xiàn)原理 利用HTML5的canvas，將解鎖的圈圈劃出，利用touch事件解鎖這些圈圈，直接看代碼。
function createCircle() {// 創(chuàng)建解鎖點(diǎn)的坐標(biāo)，根據(jù)canvas的大小來平均分配半徑
var n = chooseType;// 畫出n*n的矩陣
lastPoint = [];
arr = [];
restPoint = [];
r = ctx.canvas.width / (2 + 4 * n);// 公式計(jì)算 半徑和canvas的大小有關(guān)
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里的圓圈畫好之后可以進(jìn)行事件綁定
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) { // 用來判斷起始點(diǎn)是否在圈圈內(nèi)部
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);
}接著到了最關(guān)鍵的步驟繪制解鎖路徑邏輯，通過touchmove事件的不斷觸發(fā)，調(diào)用canvas的moveTo方法和lineTo方法來畫出折 現(xiàn)，同時(shí)判斷是否達(dá)到我們所畫的圈圈里面，其中l(wèi)astPoint保存正確的圈圈路徑，restPoint保存全部圈圈去除正確路徑之后剩余的。 Update方法：
function update(po) {// 核心變換方法在touchmove時(shí)候調(diào)用
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保存的數(shù)組變成密碼存在localstorage里面，之后就用來處理解鎖驗(yàn)證邏輯了function storePass(psw) {// touchend結(jié)束之后對(duì)密碼和狀態(tài)的處理
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 = '再次輸入';
}
}解鎖組件
將這個(gè)HTML5解鎖寫成了一個(gè)組件，放在https://github.com/lvming6816077/H5lock
以上是“怎么使用HTML5制作屏幕手勢(shì)解鎖功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站欄目：怎么使用HTML5制作屏幕手勢(shì)解鎖功能
標(biāo)題路徑：http://fisionsoft.com.cn/article/jpgcgj.html
