Mit der Entwicklung der Zeit wird HTML5 von manchen Menschen geliebt und ist auch eine unverzichtbare Programmiersprache im Entwicklungsprozess. HTML5 selbst wird vom W3C empfohlen und ist eine Technologie, die von Hunderten von Unternehmen wie Google, Apple, Nokia und China Mobile entwickelt wurde. Der größte Vorteil dieser Technologie ist, dass es sich um eine offene Technologie handelt. Mit anderen Worten: Jeder öffentliche Standard kann auf die W3C-Datenbank zurückgeführt werden. Andererseits bedeutet der vom W3C übernommene HTML5-Standard, dass jeder Browser oder jede Plattform ihn implementieren wird. In diesem Abschnitt sprechen wir über ein Tutorial zur Verwendung von HTML5 zum Erstellen einer Funktion zum Entsperren von Bildschirmgesten.
Implementierungsprinzip Verwenden Sie HTML5-Canvas, um die entsperrten Kreise zu zeichnen, verwenden Sie Berührungsereignisse, um diese Kreise zu entsperren, und schauen Sie sich den Code direkt an.
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;
}Nach dem Login kopieren
Nachdem der Kreis in der Leinwand gezeichnet wurde, kann die Ereignisbindung durchgeführt werden
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);
}Nach dem Login kopieren
Dann besteht der wichtigste Schritt darin, die Logik des Entsperrpfads zu zeichnen Wird kontinuierlich durch Touchmove-Ereignisse ausgelöst, rufen Sie die MoveTo-Methode und die LineTo-Methode von Canvas auf, um den Rabatt zu zeichnen, und bestimmen Sie gleichzeitig, ob er den von uns gezeichneten Kreis erreicht, wobei lastPoint den korrekten Kreispfad speichert und restPoint den Rest aller Kreise speichert nachdem der richtige Pfad entfernt wurde. Aktualisierungsmethode:
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;
}
}
}Nach dem Login kopieren
Der letzte Schritt ist die Abschlussarbeit. Konvertieren Sie das von lastPoint im Pfad gespeicherte Array in ein Kennwort und speichern Sie es im lokalen Speicher, der dann zur Verarbeitung der Entsperrungsüberprüfungslogikfunktion verwendet wird storePass(psw) {// touchend Verarbeitung von Passwörtern und Status nach Abschluss
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 = '再次输入';
}
}Nach dem Login kopieren
Komponente entsperren
Schreiben Sie diese HTML5-Entsperrung in eine Komponente und platzieren Sie sie unter https:// github.com/lvming6816077/H5lock
Das Obige ist ein Tutorial zur Verwendung von HTML5 zum Implementieren der Entsperrfunktion. Sie können es üben.
Verwandte Empfehlungen:
Wie man mit HTML5 einen Web-Musikplayer schreibt
Beispiel, wie man eine Liebe auf eine HTML5-Leinwand zeichnet
HTML5-Beispielcode zum Implementieren des Textscrollens
HTML5-Methode zum Erzielen eines Schneeeffekts
Verhindern html5 So zeigen Sie das Video-Tag auf dem iPhone automatisch im Vollbildmodus an
Das obige ist der detaillierte Inhalt vonErstellen Sie mit HTML5 eine Funktion zum Entsperren des Bildschirms durch Gesten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
