Html5實現手機九宮格密碼解鎖功能

jopen 8年前發布 | 3K 次閱讀 JavaScript webgis，地圖開發

HTML5真的是很強大，前端時間看到一個canvas實現九宮格的密碼解鎖。今天抽出時間模仿了一個，特定分享一下！

效果截圖如下：

效果看起來還不錯吧！

源碼如下： 

    <!DOCTYPE html>

    <html>

    <head lang="zh-CN">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

        <meta charset="UTF-8">

        <title>html5實現網頁解鎖功能</title>

        <style type="text/css">

            html, body {

                margin: 0;

                padding: 0;

                width: 100%;

                height: 100%;

            }

        </style>

        <script type="text/javascript">

            /**



         * 半徑，畫布寬度，畫布高度，畫布x內邊距，畫布y內邊距  
         */  
        var R = 26, canvasWidth = 400, canvasHeight = 320, OffsetX = 30, OffsetY = 30;  
        var circleArr = [];  
        function createCirclePoint(diffX, diffY) {  
            for (var row = 0; row < 3; row++) {  
                for (var col = 0; col < 3; col++) {  
                    // 計算圓心坐標  
                    var Point = {  
                        X: (OffsetX + col * diffX + ( col * 2 + 1) * R),  
                        Y: (OffsetY + row * diffY + (row * 2 + 1) * R)  
                    };  
                    circleArr.push(Point);  
                }  
            }  
        }  
        window.onload = function () {  
            var canvas = document.getElementById("lockCanvas");  
            canvasWidth = document.body.offsetWidth;//網頁可見區域寬  
            canvas.width = canvasWidth;  
            canvas.height = canvasHeight;  
            var cxt = canvas.getContext("2d");  
            /**  
             * 每行3個圓  
             * OffsetX為canvas x方向內邊距  
             * */  
            var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;  
            var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;  

            createCirclePoint(X, Y);  

            bindEvent(canvas, cxt);  
            //CW=2*offsetX+R*2*3+2*X  
            Draw(cxt, circleArr, [],null);  
        }  
        function Draw(cxt, circleArr, pwdArr,touchPoint) {  
            if (pwdArr.length > 0) {  
                cxt.beginPath();  
                for (var i = 0; i < pwdArr.length; i++) {  
                    var pointIndex = pwdArr[i];  
                    cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);  
                }  
                cxt.lineWidth = 10;  
                cxt.strokeStyle = "#627eed";  
                cxt.stroke();  
                cxt.closePath();  
                if(touchPoint!=null){  
                    var lastPointIndex=pwdArr[pwdArr.length-1];  
                    var lastPoint=circleArr[lastPointIndex];  
                    cxt.beginPath();  
                    cxt.moveTo(lastPoint.X,lastPoint.Y);  
                    cxt.lineTo(touchPoint.X,touchPoint.Y);  
                    cxt.stroke();  
                    cxt.closePath();  
                }  
            }  
            for (var i = 0; i < circleArr.length; i++) {  
                var Point = circleArr[i];  
                cxt.fillStyle = "#627eed";  
                cxt.beginPath();  
                cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);  
                cxt.closePath();  
                cxt.fill();  
                cxt.fillStyle = "#ffffff";  
                cxt.beginPath();  
                cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);  
                cxt.closePath();  
                cxt.fill();  
                if(pwdArr.indexOf(i)>=0){  
                    cxt.fillStyle = "#627eed";  
                    cxt.beginPath();  
                    cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true);  
                    cxt.closePath();  
                    cxt.fill();  
                }  

            }  
        }  

        /**  
         * 計算選中的密碼   
         */  
        function getSelectPwd(touches,pwdArr){  
            for (var i = 0; i < circleArr.length; i++) {  
                var currentPoint = circleArr[i];  
                var xdiff = Math.abs(currentPoint.X - touches.pageX);  
                var ydiff = Math.abs(currentPoint.Y - touches.pageY);  
                var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);  
                if(dir > R || pwdArr.indexOf(i) >= 0)  
                    continue;  
                 pwdArr.push(i);  
                 break;  
            }  
        }  

        /**  
         * 給畫布綁定事件  
         */  
        function bindEvent(canvas, cxt) {  
            var pwdArr = [];  
            canvas.addEventListener("touchstart", function (e) {  
                getSelectPwd(e.touches[0],pwdArr);  
            }, false);  
            canvas.addEventListener("touchmove", function (e) {  
                e.preventDefault();  
                var touches = e.touches[0];  
                getSelectPwd(touches,pwdArr);  
                cxt.clearRect(0,0,canvasWidth,canvasHeight);  
                Draw(cxt,circleArr,pwdArr,{X:touches.pageX,Y:touches.pageY});  
            }, false);  
            canvas.addEventListener("touchend", function (e) {  
                cxt.clearRect(0,0,canvasWidth,canvasHeight);  
                Draw(cxt,circleArr,pwdArr,null);  
                alert("密碼結果是："+pwdArr.join("->"));  
                pwdArr=[];  
            }, false);  
        }  
    </script>  
</head>  
<body>  
<canvas id="lockCanvas"></canvas>  
</body>  
</html>  </pre> 




 來自：http://blog.csdn.net/xmtblog/article/details/50252127
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！