大佬教程收集整理的这篇文章主要介绍了HTML5 Canvas简简单单实现手机九宫格手势密码解锁，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
From http://www.cnblogs.com/amylis_chen/p/4142588.html#3117954
早上花了一个半小时写了一个基于HTML Canvas的手势解锁，主要是为了好玩，可能以后会用到。
思路：根据配置计算出九个点的位置，存入一个数组，当然存入数组的顺序的索引是：
第一行：0 1 2 第二行：3 4 5 第三行：6 7 8
然后就根据这个坐标数组去绘制九个点
再则我们需要一个保存选中点的数组，每当touchmove事件就判断当前触摸点和那个点的距离小于圆的半径
如果为真的话 那么就添加进入选中点的数组
在绘制过程中就根据该数据去绘制线条。就这么简单
上代码：（需要chrome浏览器或者火狐浏览器 模拟手机状态才有触摸效果）
@H_696_37@<!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; @R_163_3816@ 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 =@R_163_3816@ () { 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); } @R_163_3816@ 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, r - 3, truE); cxt.closePath(); cxt.fill(); if(_LinePointArr.indexOf(i)>=0) { cxt.fillStyle = "#627eed"; cxt.beginPath(); cxt.arc(Point.X, r -16, truE); cxt.closePath(); cxt.fill(); } } } @R_163_3816@ 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; } } } @R_163_3816@ InitEvent(canvasContainer, cxt) { var LinePoint = []; canvasContainer.addEventListener("touchstart",@R_163_3816@ (E) { IsPointSELEct(e.touches[0],LinePoint); }, falsE); canvasContainer.addEventListener("touchmove",@R_163_3816@ (E) { e.preventDefault(); var touches = e.touches[0]; IsPointSELEct(touches,LinePoint); cxt.clearRect(0,CW,CH); Draw(cxt,PointLOCATIOnArr,LinePoint,{X:touches.pageX,Y:touches.pageY}); }, falsE); canvasContainer.addEventListener("touchend",@R_163_3816@ (E) { cxt.clearRect(0,null); alert("密码结果是："+LinePoint.join("->")); LinePoint=[]; }, falsE); } </script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>以上是大佬教程为你收集整理的HTML5 Canvas简简单单实现手机九宫格手势密码解锁全部内容，希望文章能够帮你解决HTML5 Canvas简简单单实现手机九宫格手势密码解锁所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。