js+html5实现手机九宫格密码解锁功能


Posted in Javascript onJuly 30, 2018

HTML5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下!

效果截图如下:

js+html5实现手机九宫格密码解锁功能

效果看起来还不错吧!

源码如下:

<!DOCTYPE html>
<html>
<head lang="zh-CN">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  <meta charset="UTF-8">
  <title>html5实现网页解锁功能</title>
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
  <script type="text/javascript">
   /**
   * 半径,画布宽度,画布高度,画布x内边距,画布y内边距
   */
    var R = 26, canvasWidth = 400, canvasHeight = 320, OffsetX = 30, OffsetY = 30;
   var circleArr = [];
    function createCirclePoint(diffX, diffY) {
      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)
          };
          circleArr.push(Point);
        }
      }
    }
    window.onload = function () {
      var canvas = document.getElementById("lockCanvas");
      canvasWidth = document.body.offsetWidth;//网页可见区域宽
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      var cxt = canvas.getContext("2d");
      /**
       * 每行3个圆
       * OffsetX为canvas x方向内边距
       * */
      var X = (canvasWidth - 2 * OffsetX - R * 2 * 3) / 2;
      var Y = (canvasHeight - 2 * OffsetY - R * 2 * 3) / 2;
      
      createCirclePoint(X, Y);
      
      bindEvent(canvas, cxt);
      //CW=2*offsetX+R*2*3+2*X
      Draw(cxt, circleArr, [],null);
    }
    function Draw(cxt, circleArr, pwdArr,touchPoint) {
      if (pwdArr.length > 0) {
        cxt.beginPath();
        for (var i = 0; i < pwdArr.length; i++) {
          var pointIndex = pwdArr[i];
          cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);
        }
        cxt.lineWidth = 10;
        cxt.strokeStyle = "#627eed";
        cxt.stroke();
        cxt.closePath();
        if(touchPoint!=null){
          var lastPointIndex=pwdArr[pwdArr.length-1];
          var lastPoint=circleArr[lastPointIndex];
          cxt.beginPath();
          cxt.moveTo(lastPoint.X,lastPoint.Y);
          cxt.lineTo(touchPoint.X,touchPoint.Y);
          cxt.stroke();
          cxt.closePath();
        }
      }
      for (var i = 0; i < circleArr.length; i++) {
        var Point = circleArr[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(pwdArr.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 getSelectPwd(touches,pwdArr){
      for (var i = 0; i < circleArr.length; i++) {
        var currentPoint = circleArr[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 || pwdArr.indexOf(i) >= 0)
         continue;
         pwdArr.push(i);
         break;
      }
    }
    
    /**
     * 给画布绑定事件
     */
    function bindEvent(canvas, cxt) {
      var pwdArr = [];
      canvas.addEventListener("touchstart", function (e) {
        getSelectPwd(e.touches[0],pwdArr);
      }, false);
      canvas.addEventListener("touchmove", function (e) {
        e.preventDefault();
        var touches = e.touches[0];
        getSelectPwd(touches,pwdArr);
        cxt.clearRect(0,0,canvasWidth,canvasHeight);
        Draw(cxt,circleArr,pwdArr,{X:touches.pageX,Y:touches.pageY});
      }, false);
      canvas.addEventListener("touchend", function (e) {
        cxt.clearRect(0,0,canvasWidth,canvasHeight);
        Draw(cxt,circleArr,pwdArr,null);
        alert("密码结果是:"+pwdArr.join("->"));
        pwdArr=[];
      }, false);
    }
  </script>
</head>
<body>
<canvas id="lockCanvas"></canvas>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
微信小程序实现签到功能
Oct 31 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 #Javascript
angular-tree-component的使用详解
Jul 30 #Javascript
使用vue-router为每个路由配置各自的title
Jul 30 #Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 #Javascript
在react中使用vuex的示例代码
Jul 30 #Javascript
You might like
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php生成图片验证码的方法
2016/04/15 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
JavaScript 乱码问题
2009/08/06 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
jquery实现的放大镜效果示例
2020/02/24 jQuery
讲解python参数和作用域的使用
2013/11/01 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python简单读取json文件功能示例
2017/11/30 Python
详解python3中的真值测试
2018/08/13 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Python处理PDF与CDF实例
2020/02/26 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
警校毕业生自我评价
2014/04/06 职场文书
应届生面试求职信
2014/07/02 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python