首页 > 代码库 > HTML5 Canvas简简单单实现手机九宫格手势密码解锁

HTML5 Canvas简简单单实现手机九宫格手势密码解锁

2024-07-22 19:46:17   220人阅读

 

早上花了一个半小时写了一个基于HTML Canvas的手势解锁，主要是为了好玩，可能以后会用到。

思路：根据配置计算出九个点的位置，存入一个数组，当然存入数组的顺序的索引是：

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

        然后就根据这个坐标数组去绘制九个点

        再则我们需要一个保存选中点的数组，每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径

　　  如果为真的话 那么就添加进入选中点的数组

　　  在绘制过程中就根据该数据去绘制线条。就这么简单 

上代码：（需要chrome浏览器或者火狐浏览器 模拟手机状态才有触摸效果）

 

  1 <!DOCTYPE html>  2 <html>  3 <head lang="en">  4     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"  5           name="viewport"/>  6     <meta charset="UTF-8">  7     <title></title>  8     <style type="text/css">  9         html, body { 10             margin: 0; 11             padding: 0; 12             width: 100%; 13             height: 100%; 14         } 15     </style> 16     <script type="text/javascript"> 17         var R = 26, CW = 400, CH = 320, OffsetX = 30, OffsetY = 30; 18         function CaculateNinePointLotion(diffX, diffY) { 19             var Re = []; 20             for (var row = 0; row < 3; row++) { 21                 for (var col = 0; col < 3; col++) { 22                     var Point = { 23                         X: (OffsetX + col * diffX + ( col * 2 + 1) * R), 24                         Y: (OffsetY + row * diffY + (row * 2 + 1) * R) 25                     }; 26                     Re.push(Point); 27                 } 28             } 29             return Re; 30         } 31         var PointLocationArr = []; 32         window.onload = function () { 33             var c = document.getElementById("myCanvas"); 34             CW = document.body.offsetWidth; 35             c.width = CW; 36             c.height = CH; 37             var cxt = c.getContext("2d"); 38             //两个圆之间的外距离 就是说两个圆心的距离去除两个半径 39             var X = (CW - 2 * OffsetX - R * 2 * 3) / 2; 40             var Y = (CH - 2 * OffsetY - R * 2 * 3) / 2; 41             PointLocationArr = CaculateNinePointLotion(X, Y); 42             InitEvent(c, cxt); 43             //CW=2*offsetX+R*2*3+2*X 44             Draw(cxt, PointLocationArr, [],null); 45         } 46         function Draw(cxt, _PointLocationArr, _LinePointArr,touchPoint) { 47             if (_LinePointArr.length > 0) { 48                 cxt.beginPath(); 49                 for (var i = 0; i < _LinePointArr.length; i++) { 50                     var pointIndex = _LinePointArr[i]; 51                     cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y); 52                 } 53                 cxt.lineWidth = 10; 54                 cxt.strokeStyle = "#627eed"; 55                 cxt.stroke(); 56                 cxt.closePath(); 57                 if(touchPoint!=null) 58                 { 59                     var lastPointIndex=_LinePointArr[_LinePointArr.length-1]; 60                     var lastPoint=_PointLocationArr[lastPointIndex]; 61                     cxt.beginPath(); 62                     cxt.moveTo(lastPoint.X,lastPoint.Y); 63                     cxt.lineTo(touchPoint.X,touchPoint.Y); 64                     cxt.stroke(); 65                     cxt.closePath(); 66                 } 67             } 68             for (var i = 0; i < _PointLocationArr.length; i++) { 69                 var Point = _PointLocationArr[i]; 70                 cxt.fillStyle = "#627eed"; 71                 cxt.beginPath(); 72                 cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true); 73                 cxt.closePath(); 74                 cxt.fill(); 75                 cxt.fillStyle = "#ffffff"; 76                 cxt.beginPath(); 77                 cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true); 78                 cxt.closePath(); 79                 cxt.fill(); 80                 if(_LinePointArr.indexOf(i)>=0) 81                 { 82                     cxt.fillStyle = "#627eed"; 83                     cxt.beginPath(); 84                     cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true); 85                     cxt.closePath(); 86                     cxt.fill(); 87                 } 88  89             } 90         } 91         function IsPointSelect(touches,LinePoint) 92         { 93             for (var i = 0; i < PointLocationArr.length; i++) { 94                 var currentPoint = PointLocationArr[i]; 95                 var xdiff = Math.abs(currentPoint.X - touches.pageX); 96                 var ydiff = Math.abs(currentPoint.Y - touches.pageY); 97                 var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5); 98                 if (dir < R ) { 99                     if(LinePoint.indexOf(i) < 0){ LinePoint.push(i);}100                     break;101                 }102             }103         }104         function InitEvent(canvasContainer, cxt) {105             var LinePoint = [];106             canvasContainer.addEventListener("touchstart", function (e) {107                 IsPointSelect(e.touches[0],LinePoint);108             }, false);109             canvasContainer.addEventListener("touchmove", function (e) {110                 e.preventDefault();111                 var touches = e.touches[0];112                 IsPointSelect(touches,LinePoint);113                 cxt.clearRect(0,0,CW,CH);114                 Draw(cxt,PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY});115             }, false);116             canvasContainer.addEventListener("touchend", function (e) {117                 cxt.clearRect(0,0,CW,CH);118                 Draw(cxt,PointLocationArr,LinePoint,null);119                 alert("密码结果是："+LinePoint.join("->"));120                 LinePoint=[];121             }, false);122         }123     </script>124 </head>125 <body>126 <canvas id="myCanvas"></canvas>127 </body>128 </html>

 

HTML5 Canvas简简单单实现手机九宫格手势密码解锁


联系
我们