HTML5 Canvas簡簡單單實現手機九宮格手勢密碼解鎖

本文轉載自查看原文 2014-12-04 12:51 12073 WebApp

早上花了一個半小時寫了一個基於HTML Canvas的手勢解鎖，主要是為了好玩，可能以后會用到。

思路：根據配置計算出九個點的位置，存入一個數組，當然存入數組的順序的索引是：

　　　第一行：0 1 2 　　第二行：3 4 5 　　第三行：6 7 8

然后就根據這個坐標數組去繪制九個點

再則我們需要一個保存選中點的數組，每當touchmove事件就判斷當前觸摸點和那個點的距離小於圓的半徑

　　如果為真的話那么就添加進入選中點的數組

　　在繪制過程中就根據該數據去繪制線條。就這么簡單

上代碼：（需要chrome瀏覽器或者火狐瀏覽器模擬手機狀態才有觸摸效果）

按 Ctrl+C 復制代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30;
        function CaculateNinePointLotion(diffX, diffY) {
            var Re = [];
            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)
                    };
                    Re.push(Point);
                }
            }
            return Re;
        }
        var PointLocationArr = [];
        window.onload = function () {
            var c = document.getElementById("myCanvas");
            CW = document.body.offsetWidth;
            c.width = CW;
            c.height = CH;
            var cxt = c.getContext("2d");
            //兩個圓之間的外距離 就是說兩個圓心的距離去除兩個半徑
            var X = (CW - 2 * OffsetX - R * 2 * 3) / 2;
            var Y = (CH - 2 * OffsetY - R * 2 * 3) / 2;
            PointLocationArr = CaculateNinePointLotion(X, Y);
            InitEvent(c, cxt);
            //CW=2*offsetX+R*2*3+2*X
            Draw(cxt, PointLocationArr, [],null);
        }
        function Draw(cxt, _PointLocationArr, _LinePointArr,touchPoint) {
            if (_LinePointArr.length > 0) {
                cxt.beginPath();
                for (var i = 0; i < _LinePointArr.length; i++) {
                    var pointIndex = _LinePointArr[i];
                    cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
                }
                cxt.lineWidth = 10;
                cxt.strokeStyle = "#627eed";
                cxt.stroke();
                cxt.closePath();
                if(touchPoint!=null)
                {
                    var lastPointIndex=_LinePointArr[_LinePointArr.length-1];
                    var lastPoint=_PointLocationArr[lastPointIndex];
                    cxt.beginPath();
                    cxt.moveTo(lastPoint.X,lastPoint.Y);
                    cxt.lineTo(touchPoint.X,touchPoint.Y);
                    cxt.stroke();
                    cxt.closePath();
                }
            }
            for (var i = 0; i < _PointLocationArr.length; i++) {
                var Point = _PointLocationArr[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(_LinePointArr.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 IsPointSelect(touches,LinePoint)
        {
            for (var i = 0; i < PointLocationArr.length; i++) {
                var currentPoint = PointLocationArr[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 ) {
                    if(LinePoint.indexOf(i) < 0){ LinePoint.push(i);}
                    break;
                }
            }
        }
        function InitEvent(canvasContainer, cxt) {
            var LinePoint = [];
            canvasContainer.addEventListener("touchstart", function (e) {
                IsPointSelect(e.touches[0],LinePoint);
            }, false);
            canvasContainer.addEventListener("touchmove", function (e) {
                e.preventDefault();
                var touches = e.touches[0];
                IsPointSelect(touches,LinePoint);
                cxt.clearRect(0,0,CW,CH);
                Draw(cxt,PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY});
            }, false);
            canvasContainer.addEventListener("touchend", function (e) {
                cxt.clearRect(0,0,CW,CH);
                Draw(cxt,PointLocationArr,LinePoint,null);
                alert("密碼結果是："+LinePoint.join("->"));
                LinePoint=[];
            }, false);
        }
    </script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>

按 Ctrl+C 復制代碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android手勢解鎖, 九宮格解鎖【Android - 自定義View】之自定義九宮格手勢解鎖控件 appium 九宮格解鎖招商銀行手機客戶端app Android之九宮格解鎖的實現 HTML5實現九宮格布局 HTML5實現屏幕手勢解鎖 Java計算手機九宮格鎖屏圖案連接9個點的方案總數 canvas 實現vue 手勢解鎖組件隨機生成九宮格圖形密碼-實現 js仿手機端九宮格登錄功能