原文:HTML5 Canvas简简单单实现手机九宫格手势密码解锁
早上花了一个半小时写了一个基于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>
时间： 2024-12-26 20:41:42