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

浏览数：20 / 时间：2015年06月11日

早上花了一个半小时写了一个基于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>