Erstellen Sie mit HTML5 eine Funktion zum Entsperren des Bildschirms durch Gesten

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;
    }

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);
    }

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;
            }
        }
 
    }

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 = '再次输入';
        }
 
    }

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!