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----文件操作
Jan 18 Javascript
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
js实现跨域的多种方法
Dec 25 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Numpy之random函数使用学习
2019/01/29 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
创业计划书模版
2014/02/05 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
租房合同协议书
2014/04/09 职场文书
节能环保口号
2014/06/12 职场文书
担保书范本
2015/01/20 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL