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

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

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

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

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

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

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

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

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

 <!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;

         function 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 = function () {

             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);

         }

         function 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, Point.Y, R - 3, 0, Math.PI * 2, true);

                 cxt.closePath();

                 cxt.fill();

                 if(_LinePointArr.indexOf(i)>=0)

                 {

                     cxt.fillStyle = "#627eed";

                     cxt.beginPath();

                     cxt.arc(Point.X, Point.Y, R -16, 0, Math.PI * 2, true);

                     cxt.closePath();

                     cxt.fill();

                 }

             }

         }

         function 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;

                 }

             }

         }

         function InitEvent(canvasContainer, cxt) {

             var LinePoint = [];

             canvasContainer.addEventListener("touchstart", function (e) {

                 IsPointSelect(e.touches[0],LinePoint);

             }, false);

             canvasContainer.addEventListener("touchmove", function (e) {

                 e.preventDefault();

                 var touches = e.touches[0];

                 IsPointSelect(touches,LinePoint);

                 cxt.clearRect(0,0,CW,CH);

                 Draw(cxt,PointLocationArr,LinePoint,{X:touches.pageX,Y:touches.pageY});

             }, false);

             canvasContainer.addEventListener("touchend", function (e) {

                 cxt.clearRect(0,0,CW,CH);

                 Draw(cxt,PointLocationArr,LinePoint,null);

                 alert("密码结果是："+LinePoint.join("->"));

                 LinePoint=[];

             }, false);

         }

     </script>

 </head>

 <body>

 <canvas id="myCanvas"></canvas>

 </body>

 </html>

HTML5 Canvas简简单单实现手机九宫格手势密码解锁的更多相关文章

  1. Swift 简简单单实现手机九宫格手势密码解锁

    原文:Swift 简简单单实现手机九宫格手势密码解锁 大家可以看到我之前的文章［HTML5 Canvas简简单单实现手机九宫格手势密码解锁］ 本文是使用苹果语言对其进行了移植 颜色配色是拾取的支付宝的 ...

  2. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  3. iOS 九宫格手势密码

    代码地址如下:http://www.demodashi.com/demo/11490.html 一.准备工作 需要准备什么环境 xcode,iOS8+ 本例子实现什么功能 主要实现手势密码设置,验证 ...

  4. Appnium+python实现手势密码为什么总是报错

    最近一直在尝试Appnium实现Android手机自动化测试,一直一直卡在一个点上,那就是手势密码,因为所测应用的手势密码使用的不是单个的imageview实现的手势密码解锁窗,所以只能靠坐标点来定位 ...

  5. 支付宝钱包手势密码破解实战（root过的手机可直接绕过手势密码）

    /* 本文章由 莫灰灰 编写,转载请注明出处. 作者:莫灰灰    邮箱: minzhenfei@163.com */ 背景 随着移动互联网的普及以及手机屏幕越做越大等特点,在移动设备上购物.消费已是 ...

  6. [转载]支付宝钱包手势密码破解实战（root过的手机可直接绕过手势密码）

    /* *转自http://blog.csdn.net/hu3167343/article/details/36418063 *本文章由 莫灰灰 编写,转载请注明出处. *作者:莫灰灰    邮箱: m ...

  7. Html5实现手机九宫格password解锁功能

    HTML5真的是非常强大,前端时间看到一个canvas实现九宫格的password解锁. 今天抽空模仿了一个,特定分享一下. 效果截图例如以下: 效果看起来还不错吧! 源代码例如以下: <!DO ...

  8. appium_python 实现手势密码

    直接上代码吧: from appium.webdriver.common.touch_action import TouchAction from driver import AppiumTest # ...

  9. vue项目中实现手势密码

    思路: 本来应该全部都用canvas来实现的,但时间紧迫 写的时候只想着圆圈用li写,线用canvas,写到一半才想通,还好这一通下来比较顺利 第一步:页面中的9个点用v-for循环出来li,ul设置 ...

随机推荐

  1. 策略模式Strategy——坐什么车回家？

    1.存在的问题和模型 :2014年6月       学校:廊坊师范        家:石家庄       人物:学生 又快到期末考试了.回家的节奏也奔上日程,无聊之余就想想这次回家的事儿. 对我来说回 ...

  2. 创建高性能移动 web 站点【转载】

    如果你的网站3秒钟没有响应,人们就会失去兴趣了.为了满足响应快这个愿望,需要一个不同的方法在手机上进行分析,设计和测试. 这篇文章将会对Johan Johansson在2013年4月提出"  ...

  3. LAN远程重启server安全方法

    原创文章.转载请注明出处.(百度经验:http://jingyan.baidu.com/article/454316abaadc41f7a7c03a13.html) 在局域网中,管理和操作server ...

  4. swift 笔记 (十九) —— 协议

    协议(Protocols) 协议仅是用定义某些任务或者是功能必须的方法和属性. 类似于java里的interface的作用.但协议并不会实现详细的功能. 我猜这个名字源于OO中提到的"契约& ...

  5. 学习笔记之TCP/IP协议的重要性

    1. 随处可见的协议     在计算机网络与信息通信领域里,人们常常提及"协议"一词.互联网中常 用的具有代表性的协议有IP.TCP.HITP等. 而LAN(局域网)中经常使用的协 ...

  6. Struts2大约Action系统培训6大约action的接受三个参数的方法

    我们知道,action在web它在控制器的发展起到了一定作用,通过接收client来到参数,运行不同的模块只实现运营,因此,接收参数是非常重要的组成部分,有接收到的参数的仅前端.操作权限运行数据库后端 ...

  7. java设计模式：观察者模式

    package Observer; public class Test { /** * client测试类别 * 观察者模式一般由四部分组成: * 1摘要观察员(教科书被称为一般"Subje ...

  8. APP漏洞导致移动支付隐患重重，未来之路怎样走？

    没有一种支付是100%安全的,互联网及移动支付规模的增长,其交易的安全性须要银行.支付公司.App开发人员.用户等參与各方更加重视.当下手机支付似乎变成了一种时尚,用户们"刷手机" ...

  9. （大数据工程师学习路径）第二步 Vim编辑器----Vim快速入门

    vim模式介绍 以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数的编辑器使用了与Vim截 ...

  10. BZOJ 1801 AHOI2009 中国象棋 递归

    标题效果:给定一个棋盘.放置一些枪.它需要随机两支枪不能互相攻击,评估的数目p模值 首先,两炮不攻击对方自由地等同于一条线最多可有只有两个枪 直形压力DP话是50分 考虑到每个列是等效 然后我们就可以 ...