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

早上花了一个半小时写了一个基于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/> 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></canvas> 127 </body> 128 </html>