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 相关文章推荐
Jquery练习之表单验证实现代码
Dec 14 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP文件下载类
2006/12/06 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP的全局错误处理详解
2016/04/25 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
Python调用C# Com dll组件实战教程
2017/10/12 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
期末总结的个人自我评价
2013/11/02 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
党员岗位承诺书
2014/03/25 职场文书
事业单位聘任报告
2015/03/02 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
歌咏比赛主持词
2015/06/29 职场文书
vue 实现上传组件
2021/05/31 Vue.js
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL