原文: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. myEclipse项目部署按钮失效了，怎么办？

    myEclipse项目部署按钮失效了,按了以后没反应,怎么办? 步骤如下: 1.首先关闭MyEclipse. 2.然后删除Workspaces目录(存放您MyEclipse项目的地方)下的 " ...

  2. 将cocos2dx+lua创建的游戏port到windows phone

    在整个Port的过程中遇到的问题总结例如以下 1.一定要使用最新版本号的cocos2dx,原因大家看一下changelog就知道了,近期的cocos2dx版本号都是在修windows phone上的b ...

  3. PowerShell 批量导入/导出Active Directory

    PowerShell 批量导入/导出Active Directory         近期由于公司要求,须要导入20个供应商.20个客户到AD域中,刚開始手动添�了2个供应商,2个客户.可是感觉费时费 ...

  4. 搜索引擎排名不友好的五个地点-SEO

    搜索引擎(百度/谷歌/雅虎)排名不友好的五个地点 别的站点,推断标准和考核得分点是不 一样的,避免对百度排名不友好的五种站点操作 你的站点是否在这五种站点里,决定你的站点能否获得排 名. 1.有没有同 ...

  5. 由iPhone emoji问题牵出UTF-16编码，UTF-8编码查询

    前言 iOS平台,系统输入法emoji表达.表达式不能在很多其他平台上显示,尤其是在Android.Symbian系统.我决定到底要探索1:我指的是一些知识: (注意:该博文已经如果读者已经了解utf ...

  6. boostrap-非常好用但是容易让人忽略的地方------input-group-btn

    1.正常的使用 <div class="form-group"> <div class="input-group"> <input ...

  7. java major version(转)

    在jar包中,用winrar解压一个类文件,然后在命令行下面输入 javap -verbose classname 会输出一些信息,大致如下: Compiled from "HtmlCraw ...

  8. Nginx搭建反向代理服务器过程详解（转）

    一.反向代理 我们都知道,80端口是web服务的默认端口,其他主机访问web服务器也是默认和80端口进行web交互,而一台服务器也只有一个80端口,这是约定俗成的标准. 我们来看下面两个场景: 1.服 ...

  9. Android系统关机或几种方式重启

    ---------------------------------------------------------------------------------------------------- ...

  10. MySQL 更新中国列：1366 Incorrect string value 问题解决了

    周围环境:Win7 64位置,mysql-5.6.25-winx64,MySQL workbench 问题:MySQL在更新时出现异常: warning(s): 1366 Incorrect stri ...