js+canvas验证码

最新推荐文章于 2023-07-02 15:46:19 发布

李三岁zt

最新推荐文章于 2023-07-02 15:46:19 发布

阅读量154

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/weixin_41983883/article/details/127743644

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
      }
      .main > input {
        height: 40px;
        padding-left: 15px;
        width: 300px;
        outline: none;
      }
      canvas {
        border: 1px solid lightblue;
        border-radius: 4px;
        margin: 0 20px;
      }
      button {
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <input type="text" placeholder="输入验证码(区分大小写)" />
    </div>
    <canvas onclick="changeCode()" width="100" height="40"></canvas>
    <button onclick="submit()">提交</button>
    <script>
      let canvas = document.querySelector("canvas");
      let ctx = canvas.getContext("2d");
      let chars = []; // 保存生成的4位验证码，用于和输入的值进行对比

      // 1. 展示随机验证码
      // 默认值参数，不穿count参数，默认是4.
      function randomCode(count = 4) {
        // 清空画布
        ctx.clearRect(0, 0, 100, 40);
        // 清空数组
        chars = [];
        let str =
          "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,a,b,c,d,e,f,1,2,3,4,5,6,7,8,9";
        let arr = str.split(",");
        for (let i = 0; i < count; i++) {
          // 随机生成整数索引值
          let idx = Math.floor(Math.random() * arr.length);
          let randomStr = arr[idx];

          // 将随机字符保存至数组
          chars.push(randomStr);

          ctx.font = "30px 微软雅黑";
          ctx.fillStyle = randomColor();

          /*
          方式一：通过文本基点设置文本
          ctx.textBaseline = "middle";
          ctx.textAlign = "center";
          let x = 15 + i * 25;
          let y = Math.random() * 5 + 20; // [20, 30]
          ctx.fillText(randomStr, x, y);
          */

          // 方式二：通过旋转平移设置文本
          // 随机[-60° +60°]之间，设置画布的旋转角度
          // ctx.rotate(弧度)
          // 角度转弧度
          // 360°/2Π = 60°/?
          let deg = (Math.random() * 60 * Math.PI) / 180;
          let x = 10 + i * 20;
          let y = Math.random() * 5 + 20;
          ctx.translate(x, y);
          ctx.rotate(deg);

          ctx.fillText(randomStr, 0, 0);

          // 恢复默认的旋转角度
          ctx.rotate(-deg);
          ctx.translate(-x, -y);
        }

        // 随机生成线条
        for (let i = 0; i < count; i++) {
          ctx.beginPath();
          ctx.strokeStyle = randomColor();
          ctx.moveTo(
            Math.random() * canvas.width,
            Math.random() * canvas.height
          );
          ctx.lineTo(
            Math.random() * canvas.width,
            Math.random() * canvas.height
          );
          ctx.stroke();
        }

        // 随机点
        for (let i = 0; i < 30; i++) {
          ctx.beginPath();
          ctx.strokeStyle = randomColor();
          let x = Math.random() * canvas.width;
          let y = Math.random() * canvas.height;
          ctx.moveTo(x, y);
          ctx.lineTo(x + 1, y + 1);
          ctx.stroke();
        }
      }
      randomCode(4);

      // 获取随机颜色值
      function randomColor() {
        return `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(
          Math.random() * 255
        )}, ${Math.floor(Math.random() * 255)})`;
      }

      // 切换验证码
      function changeCode() {
        randomCode();
      }

      // 验证
      function submit() {
        let val = document.querySelector("input").value;
        let targetVal = chars.join("");

        // 不区分大小写
        let val1 = val.toLowerCase();
        let targetVal1 = targetVal.toLowerCase();

        console.log(val1, targetVal1);

        if (val1 == targetVal1) {
          alert("恭喜你！验证成功");
          randomCode();
        } else {
          alert("恭喜你！验证失败");
          randomCode();
        }
      }
    </script>
  </body>
</html>