原文: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. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  2. javascript倒置再次被否定作用

    于javascript位反然后可以转换为浮点塑料,而不是更有效parseInt近两倍 var start = new Date().getTime(); for (var i = 0; i < ...

  3. 大数据的胖哥的方式（9）- 金融业数据仓库的逻辑模型FS-LDM

    介绍: 大数据是不是海市蜃楼,来自小橡子只是意淫奥克斯,大数据的发展,而且要从头开始,基于大数据建设国家.项目-level数据中心行业将越来越多,大数据仅供技术,而非溶液,临数据组织模式,数据逻辑模式 ...

  4. Android中的应用——谷歌官方Json分析工具Gson使用

    一个.Gson基本介绍 Gson(又称Google Gson)是Google公司公布的一个开放源码的Java库.主要用途为串行化Java对象为JSON字符串,或反串行化JSON字符串成Java对象. ...

  5. WPF学习（1）WPF概述

    WPF(Windows Presentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于NET Framework 3.0的一部分.它提供了统一的编程模型 ...

  6. mount命令使用具体解释（Linux）

    linux是一个优秀的开放源代码的操作系统,能够执行在大到巨型小到掌上型各类计算机系统上,随着 linux系统的日渐成熟和稳定以及它开放源代码特有的优越性,linux在全世界得到了越来越广泛的应用. ...

  7. BZOJ 1009 HNOI2008 GT考试 KMP算法+矩阵乘法

    标题效果:给定的长度m数字字符串s.求不包括子s长度n数字串的数目 n<=10^9 看这个O(n)它与 我们不认为这 令f[i][j]长度i号码的最后的字符串j位和s前者j数字匹配方案 例如,当 ...

  8. 设计模式之空对象(Null Object)模式

    通过引用Null Object,用于取消业务逻辑中对对象的为空推断 类图: Nullable: package com.demo.user; public interface Nullable { b ...

  9. axure & Markman

    axure & Markman学习总结 最近学了几款有意思的软件,一款是axure,另一款是Markman.接下来聊聊自己的学习心得吧. 关于axure,百度上的解释是:是一个专业的快速原型设 ...

  10. C#中假设正确使用线程Task类和Thread类

    C#中使用线程Task类和Thread类小结 刚接触C#3个月左右.原先一直使用C++开发.由于公司的须要,所地採用C#开发.主要是控制设备的实时性操作,此为背景. 对于C#中的Task和Thread ...