html，js实现九宫格解锁bug求大佬给看看

k906559098 2017-03-27 04:05:13

<!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实现网页解锁功能(基于iphone6)</title>

    <style type="text/css">

    html,

    body {

        margin: 0;

        padding: 0;

        width: 380px;

        height: 600px;

    }

    

    #set {

        margin-left: 120px;

    }

    

    #test {

        margin-top: 20px;

        margin-left: 120px;

    }

    </style>

    <script type="text/javascript">

    /**  

     * 半径，画布宽度，画布高度，画布x内边距，画布y内边距  

     */

    var R = 26,

        canvasWidth = 400,

        canvasHeight = 320,

        OffsetX = 30,

        OffsetY = 30;

    var circleArr = [];

    var theSecondResult = [];

    var aa = [];

    var bb = [];

    var n = 1;





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

            return pwdArr;

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

            var theResult = pwdArr.join("->");







            // alert("密码结果是：" + theResult);



            if (document.getElementById("set").checked === true) { //选择功能为设置密码

                if (pwdArr.length < 5) { //判断密码长度

                    alert("密码过短,请重新输入");

                    pwdArr = [];

                } else {

                    localStorage.thePassword = theResult;

                    bb = theResult;

                    //次数

                    alert("设置的密码为：" + localStorage.thePassword);

                    alert("请再次输入密码");



                    n++;

                }

            }

            secondbindEvent(canvas, cxt);

        }, false);

        if (document.getElementById("test").checked === true) { //选择功能为验证密码

            alert("请测试");

            if (pwdArr == localStorage.thePassword) {





            }

        }

        return n;



    }



    function secondbindEvent(canvas, cxt) {

        var pwdArr1 = [];

        canvas.addEventListener("touchstart", function(e) {

            getSelectPwd(e.touches[0], pwdArr1);

        }, false);

        canvas.addEventListener("touchmove", function(e) {

            e.preventDefault();

            var touches = e.touches[0];

            getSelectPwd(touches, pwdArr1);

            cxt.clearRect(0, 0, canvasWidth, canvasHeight);

            Draw(cxt, circleArr, pwdArr1, {

                X: touches.pageX,

                Y: touches.pageY

            });

        }, false);

        canvas.addEventListener("touchend", function(e) {

            cxt.clearRect(0, 0, canvasWidth, canvasHeight);

            Draw(cxt, circleArr, pwdArr1, null);

            var theResult1 = pwdArr1.join("->");

            alert("2222");

            aa = theResult1;

            localStorage.theSecond = aa;

            if (n >= 2) {



                if (localStorage.theSecond = bb) {

                    alert("设置成功！");

                    n = 0;

                } else if (localStorage.theSecond != bb) {

                    alert("两次输入密码不一致！");

                }

            }

        }, false);





    }

    </script>

</head>



<body>

    <canvas id="lockCanvas"></canvas>

    <form action="" method="get">

        <label>

            <input name="password" id="set" type="radio" value="1" checked="checked" />设 置 密 码</br>

        </label>

        <label>

            <input name="password" id="test" type="radio" value="2" />验 证 密 码</label>

    </form>

</body>



</html>

想实现一个九宫格解锁，首先设置输入一次后计算的pwdArr值保存到localstorage用来验证解锁，然后二次输入验证，但是要清空画布，此刻清空画布后又会跳到第一步，因为这些都是绑定在画布事件touchend上的，我就想再次建立一个事件用于获取二次输入值，但是怎么都实现不了，请大神帮我看看，怎么实现将二次输入的值保存然后和第一次输入的值比较保存！万分感谢

...全文