HTML5로 화면 제스처 잠금 해제 기능 만들기

시대의 발전과 함께 HTML5는 일부 사람들에게 사랑을 받고 있으며 개발 과정에서 없어서는 안될 프로그래밍 언어이기도 합니다. HTML5 자체는 W3C에서 권장하는 기술이며, 구글, 애플, 노키아, 차이나모바일 등 수백개 기업이 만들어낸 기술이다. 이 기술의 가장 큰 장점은 개방형 기술이라는 점이다. 즉, 모든 공개 표준은 W3C 데이터베이스로 추적될 수 있습니다. 반면, W3C에서 채택한 HTML5 표준은 모든 브라우저 또는 모든 플랫폼이 이를 구현한다는 의미입니다. 이 섹션에서는 HTML5를 사용하여 화면 제스처 잠금 해제 기능을 만드는 방법에 대한 튜토리얼에 대해 설명합니다.

구현 원리 HTML5 캔버스를 사용하여 잠금 해제된 원을 그리고 터치 이벤트를 사용하여 이러한 원을 잠금 해제한 후 코드를 직접 살펴보세요.

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

캔버스에 원을 그린 후 이벤트 바인딩을 수행할 수 있습니다

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

그런 다음 가장 중요한 단계는 touchmove 이벤트의 지속적인 트리거를 통해 moveTo 메서드와 lineTo 메서드를 그리는 것입니다. 할인을 그리기 위해 캔버스가 호출되고 동시에 우리가 그린 원에 도달하는지 확인합니다. 여기서 lastPoint는 올바른 원 경로를 저장하고, RestPoint는 올바른 경로를 제거한 후 나머지 모든 원을 저장합니다. 업데이트 방법:

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

마지막 작업은 lastPoint가 경로에 저장한 배열을 비밀번호로 변환하여 localstorage에 저장한 후 잠금 해제 확인 로직 함수 storePass(psw)를 처리하는 데 사용됩니다. / 터치엔드 종료 후 비밀번호 및 상태 변경 처리

     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 컴포넌트

이 HTML5 잠금 해제를 컴포넌트에 작성하고 https://github.com/lvming6816077/H5lock

에 배치하세요. 위는 튜토리얼입니다. HTML5를 사용하여 잠금해제 기능을 구현하는 방법을 연습할 수 있습니다.

관련 권장 사항:

html5를 사용하여 웹 뮤직 플레이어를 작성하는 방법

html5 하트를 그리는 방법에 대한 캔버스 예제

html5 텍스트 스크롤을 위한 예제 코드

html5 눈 내리는 효과 얻기 방법

iPhone에서 html5 비디오 태그가 자동으로 전체 화면으로 표시되지 않도록 하는 방법

위 내용은 HTML5로 화면 제스처 잠금 해제 기능 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!