利用Canvas标签制作一个验证码

html部分代码：

        <div class="code">
          <canvas ref="captchaCanvas" height="80" @click="refresh"></canvas>
          <Field v-model="code" placeholder="输入验证码后继续收看" />
          <div class="icon">
            <span>点击图片刷新</span>
          </div>
        </div>
        <Button type="primary" @click="sure">确定</Button>

css部分代码：（具体情况可以自行修改）

.code {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  > canvas {
    width: 100%;
    height: 80px;
  }
  ::v-deep .van-field__value {
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 0 10px;
  }
  ::v-deep .van-cell {
    padding: 10px 10px !important;
  }
  .icon {
    position: absolute;
    bottom: 40px;
    display: flex;
    align-items: center;
    right: 14px;
    color: #aaa;
    cursor: pointer;
  }
}

::v-deep .van-button {
  width: calc(100% - 20px);
  margin: 0 10px;
  border-radius: 5px;
}

js部分代码：

export default {
    data() {
        return {
            captchaText: "",
            clear: false,
    },
    methods: {
        // 输入验证码后，进行验证码校验
        sure() {
            if (!this.code) {
                this.$toast("验证码不能为空！");
              } else if (this.code === this.captchaText) {
                this.clear = true;
                this.code = "";
              } else {
                this.$toast("验证码输入错误！");
              }
            },    
        // 随机生成颜色
        buildColor() {
            const color =
                "#" +
                Math.floor(Math.random() * 0xffffff)
                  .toString(16)
                  .padStart(6, "0");
              return color;
        },
        // 画布上绘制图形
        drawCaptcha() {
            const canvas = this.$refs.captchaCanvas;
            const ctx = canvas.getContext("2d");
            if (this.clear) {
                ctx.clearRect(1, 1, 300, 100);
            }    
            for (let i = 0; i <= 10; i++) {
                //验证码上显示线条
                ctx.strokeStyle = this.buildColor();
                ctx.beginPath();
                ctx.moveTo(Math.random() * 300, Math.random() * 100);
                ctx.lineTo(Math.random() * 300, Math.random() * 100);
                ctx.stroke();
              }
            for (let i = 0; i <= 50; i++) {
                //验证码上显示小点
                ctx.strokeStyle = this.buildColor();
                ctx.beginPath();
                let x = Math.random() * 300;
                let y = Math.random() * 100;
                ctx.moveTo(x, y);
                ctx.lineTo(x + 1, y + 1);
                ctx.stroke();
            }
            const captchaText = this.generateCaptchaText();
            ctx.font = "bold 58px serif";
            ctx.rect(1, 1, 200, 100);
            let gra = ctx.createLinearGradient(0, 0, 0, 80);
            gra.addColorStop(0, this.buildColor());
            gra.addColorStop(1, this.buildColor());
            ctx.fillStyle = gra;
            ctx.fillText(captchaText, 100, 60);
        },
        // 生成一个4位字符串
        generateCaptchaText() {
            const chars =
            "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
            let captchaText = "";
            for (let i = 0; i < 4; i++) {
                captchaText += chars[Math.floor(Math.random() * chars.length)];
              }
            console.log(111, captchaText);
            this.captchaText = captchaText;
            return captchaText;
        },
        // 验证码刷新
        refresh() {
          this.clear = true;
          this.drawCaptcha();
        },
    }
}

实现效果：