Créer une fonction de déverrouillage par geste d'écran avec HTML5

Avec l'évolution des temps, HTML5 est apprécié par certaines personnes et constitue également un langage de programmation indispensable dans le processus de développement. HTML5 lui-même est recommandé par le W3C. Son développement est une technologie élaborée par des centaines d'entreprises telles que Google, Apple, Nokia et China Mobile. Le plus grand avantage de cette technologie est qu'il s'agit d'une technologie ouverte. En d’autres termes, chaque norme publique peut être retracée jusqu’à la base de données du W3C. En revanche, le standard HTML5 adopté par le W3C signifie que chaque navigateur ou chaque plateforme l'implémentera. Dans cette section, nous parlerons d'un didacticiel sur l'utilisation de HTML5 pour créer une fonction de déverrouillage par gestes à l'écran.

Principe de mise en œuvre Utilisez le canevas HTML5 pour dessiner les cercles déverrouillés, utilisez des événements tactiles pour déverrouiller ces cercles et regardez directement le code.

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

Une fois le cercle dessiné dans le canevas, la liaison des événements peut être effectuée

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

Ensuite, l'étape la plus critique consiste à dessiner la logique du chemin de déverrouillage, qui est déclenché en continu par les événements touchmove, appelez la méthode moveTo et la méthode lineTo du canevas pour dessiner la remise, et en même temps déterminer si elle atteint le cercle que nous avons dessiné, où lastPoint enregistre le chemin du cercle correct et restPoint enregistre le reste de tous les cercles après avoir supprimé le chemin correct. Méthode de mise à jour :

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

La dernière étape est le travail de finition, convertissez le tableau enregistré par lastPoint dans le chemin en un mot de passe et stockez-le dans le stockage local, qui sera ensuite utilisé pour traiter la fonction logique de vérification de déverrouillage storePass(psw) {// touchend Traitement des mots de passe et du statut une fois terminé

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

Composant de déverrouillage

Écrivez ce déverrouillage HTML5 dans un composant et placez-le sur https:// github.com/lvming6816077/H5lock

Ce qui précède est un tutoriel sur la façon d'utiliser HTML5 pour implémenter la fonction de déverrouillage. Vous pouvez le pratiquer.

Recommandations associées :

Comment utiliser HTML5 pour écrire un lecteur de musique Web

Exemple de comment dessiner un amour sur une toile HTML5

Exemple de code HTML5 pour implémenter le défilement de texte

Méthode HTML5 pour obtenir un effet de neige

Prévenir html5 Comment afficher automatiquement la balise vidéo en plein écran sur iPhone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!