JavaScript
搜索
分类

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

作者：业余草 时间：2024-05-09 15:02:36　

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>

来源：https://blog.csdn.net/xmtblog/article/details/50252127

标签：js,九宫格,密码解锁
0
投稿

猜你喜欢

  • Windows下mysql5.7.10安装配置方法图文教程

    2024-01-19 16:19:43

  • Golang解析JSON遇到的坑及解决方法

    2024-05-10 13:58:29

  • python 查看cpu的核数实现

    2023-01-02 21:09:31

  • php实现mysql同步的实现方法

    2023-11-24 13:58:56

  • Python必须了解的35个关键词

    2023-05-20 07:37:33

  • 浅析python中的迭代与迭代对象

    2023-11-19 09:21:35

  • Python函数参数分类原理详解

    2022-02-26 17:05:57

  • Python使用shutil模块实现文件拷贝

    2021-02-01 14:46:28

  • 运行(runCode)复制(copyCode)保存(saveCode)代码框方法

    2007-10-21 08:41:00

  • PHP类的特性实例分析

    2024-05-03 15:49:46

  • vue如何使用router.meta.keepAlive对页面进行缓存

    2024-05-29 22:49:03

  • 一文学会利用python解决文章付费限制问题

    2021-04-09 08:23:51

  • 如何通过pycharm实现对数据库的查询等操作(非多步操作)

    2024-01-25 03:31:37

  • 一文搞懂Go Exec 僵尸与孤儿进程

    2023-10-21 07:14:07

  • debian6配置mysql允许远程连接的方法(图)

    2024-01-13 19:42:20

  • bootstrap选项卡使用方法解析

    2024-04-16 09:13:11

  • 仿微博字符限制效果实现代码

    2024-04-28 09:51:18

  • Windows下pycharm安装第三方库失败(通用解决方案)

    2022-06-07 22:54:37

  • 为什么相对PHP黑python的更少

    2024-05-21 10:20:51

  • 最新解决没有NVSMI文件夹以及nvidia-smi‘ 不是内部或外部命令也不是可运行的程序或批处理文件

    2023-03-26 18:13:34
    • asp之家 网络编程 m.aspxhome.com