Create screen gesture unlock function with HTML5

With the development of the times, HTML5 is loved by some people and is also an indispensable programming language in the development process. HTML5 itself is recommended by the W3C. Its development is a technology brewed by hundreds of companies such as Google, Apple, Nokia, and China Mobile. The biggest advantage of this technology is that it is an open technology. In other words, every public standard can be traced back to the W3C database. On the other hand, the HTML5 standard adopted by W3C means that every browser or every platform will implement it. In this section, we will talk about a tutorial on using HTML5 to create a screen gesture unlock function.

Implementation principle Use the HTML5 canvas to draw out the unlocked circles, use touch events to unlock these circles, and look at the code directly.

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

After the circle in the canvas is drawn, event binding can be performed

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

Then the most critical step is to draw the unlocking path logic. Through the continuous triggering of the touchmove event, the canvas's The moveTo method and the lineTo method are used to draw the discount, and at the same time determine whether it reaches the circle we drew. LastPoint saves the correct circle path, and restPoint saves the remainder of all circles after removing the correct path. Update method:

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

The last step is the finishing work. Turn the array saved by lastPoint in the path into a password and store it in localstorage. It will then be used to process the unlocking verification logic function storePass(psw) {//After touchend ends Processing of passwords and status

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

Unlocking component

Write this HTML5 unlocking into a component and place it at https://github.com/lvming6816077/H5lock

The above is a tutorial on how to use HTML5 to implement the unlocking function. You can practice it.

Related recommendations:

How to use html5 to write a web music player

Example of how to draw a love on html5 canvas

html5 sample code to implement text wheel scrolling

html5 method to achieve snow effect

Prevent html5 How to automatically full-screen the video tag in iPhone

The above is the detailed content of Create screen gesture unlock function with HTML5. For more information, please follow other related articles on the PHP Chinese website!