温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中怎么生成随机验证码

发布时间:2021-06-17 17:04:34 来源:亿速云 阅读:183 作者:Leah 栏目:web开发

这篇文章将为大家详细讲解有关JavaScript中怎么生成随机验证码,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

利用canvas制作一个随机验证码:

  1、clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素

  2、fillStyle:设置画笔的颜色

  3、rotate(deg):旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )

  4、translate(): 方法重新映射画布上的位置  

  5、Math.random():获取0-1之间的一个随机数,不包含1

JavaScript中怎么生成随机验证码

<!-- HTML -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas随机验证码</title>
  </head>
  <body>
    <canvas id="canvas" width="100" height="40" ></canvas>
  </body>
  <script type="text/javascript">
    var myCanvas = document.querySelector("#canvas");
    var blur = myCanvas.getContext("2d");
    // 当点击画布时创建一个新的路径
    // 验证码封装
    myCanvas.onclick = function() {
      // 实现点击画布创建一个新的验证码
      blur.clearRect(0,0,100,40);
      verify();
    }
    verify();
    function verify() {
      // 绘制矩形框
      // blur.strokeRect(0,0,100,40);
      // 随机验证码
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
        "v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
        "Z"
      ];
      // 显示四位数的验证码
      for (var i = 0; i < 4; i++) {
        var x = 20 + 20 * i;
        var y = 20 + 10 * Math.random();
        // console.log(x,y);
        // 在数组中获取到随机的索引整数
        var index = Math.floor(Math.random() * arr.length);
        // 通过随机的索引获取到随机的元素
        var texts = arr[index];
        // 设置验证码的相关样式
        blur.font = "bold 20px 微软雅黑";
        blur.fillStyle = textColor();
        // 画布旋转显示
        // translate() 方法重新映射画布上的位置
        blur.translate(x, y);
        // 将画布旋转,旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )
        var deg = 90 * Math.random() * Math.PI / 180;
        blur.rotate(deg); //
        blur.fillText(texts, 0, 0);
        // 将画布映射返回原来的位置
        blur.rotate(-deg);
        blur.translate(-x, -y);
      }
      
      // 制作验证码的干扰线制作
      for(var i=0;i<6;i++){
        blur.beginPath();
        blur.moveTo(Math.random()*100,Math.random()*40);
        blur.lineTo(Math.random()*100,Math.random()*40);
        // 设置干扰线的颜色
        blur.strokeStyle=textColor();
        blur.stroke();
      }
      // 制作验证码的干扰圆点
      for(var i=0;i<20;i++){
        blur.beginPath();
        var x=Math.random()*100;
        var y=Math.random()*100;
        blur.moveTo(x,y);
        blur.lineTo(x+1,y+1);
        // 设置干扰线的颜色
        blur.strokeStyle=textColor();
        blur.stroke();
      }
    }
    // 获取随机颜色封装
    function textColor(){
      var red=Math.floor(Math.random()*256);
      var green=Math.floor(Math.random()*256);
      var blue=Math.floor(Math.random()*256);
      return "rgb("+red+","+green+","+blue+")";
    }
  </script>
</html>
x要清除的矩形左上角的 x 坐标
y要清除的矩形左上角的 y 坐标
width要清除的矩形的宽度,以像素计
height要清除的矩形的高度,以像素计

关于JavaScript中怎么生成随机验证码就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI