欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 12:03:47
html5真的是很强大,前端时间看到一个canvas实现九宫格的密码解锁。今天抽出时间模仿了一个,特定分享一下! 效果截图如下: 效果看起来还不错吧! 源码如下:...

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>

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