DDR爱好者之家

js+html5实现手机九宫格密码解锁功能
站长资源 2024/11/26 佚名
73 1538
DDR爱好者之家 Design By 杰米

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米