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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
轻轻松松学习JavaScript
Feb 25 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
jquery处理json对象
Nov 03 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
PHP7 其他修改
2021/03/09 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python利用faker库批量生成测试数据
2020/10/15 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
教师岗位职责
2013/11/17 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
上课迟到检讨书
2014/02/19 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
环保口号大全
2014/06/12 职场文书