验证码（1）字符验证码_verifycode.js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41562817/article/details/135967746

本文介绍了如何使用JavaScript库verifyCode.js中的函数在canvas上生成并绘制带有干扰线和点的验证码图片，同时展示了在Vue组件中调用该功能的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

（1）verifyCode.js ：使用canvas绘制图片

  /**number是验证码值 id是canvas的id属性值**/
export const numPic = (number, id) => {
  /**生成一个随机数**/
  function randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }
  /**生成一个随机色**/
  function randomColor(min, max) {
    let r = randomNum(min, max);
    let g = randomNum(min, max);
    let b = randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
  }

  /**绘制验证码图片**/
  function drawPic(num) {
    let canvas = document.getElementById(id);
    let width = canvas.width;
    let height = canvas.height;
    let ctx = canvas.getContext("2d");
    ctx.textBaseline = "bottom";

    /**绘制背景色**/
    ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
    ctx.fillRect(0, 0, width, height);

    /**绘制文字**/
    let txt = num;
    ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
    ctx.font = randomNum(30, 35) + "px SimHei"; //随机生成字体大小
    let x = 18;
    let y = 40;
    let deg = randomNum(-10, 10);
    //修改坐标原点和旋转角度
    ctx.translate(x, y);
    ctx.rotate((deg * Math.PI) / 180); //ctx.rotate(60 * Math.PI /180) (旋转60度的简单公式)
    ctx.fillText(txt, 0, 0);
    //恢复坐标原点和旋转角度
    ctx.rotate((-deg * Math.PI) / 180);
    ctx.translate(-x, -y);

    /**绘制干扰线**/
    for (let i = 0; i < 3; i++) {
      ctx.strokeStyle = randomColor(40, 180);
      ctx.beginPath();
      ctx.moveTo(randomNum(0, width), randomNum(0, height));
      ctx.lineTo(randomNum(0, width), randomNum(0, height));
      ctx.stroke();
    }

    /**绘制干扰点**/
    for (let i = 0; i < 60; i++) {
      ctx.fillStyle = randomColor(0, 255);
      ctx.beginPath();
      ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
      ctx.fill();
    }
  }
  return drawPic(number);
};

（2）在页面调用自制工具verifyCode.js

<template>
  <canvas id="canvas" width="100" height="50"></canvas>
</template>

<script>
import { numPic } from "../utils/verifyCode";
export default {
  methods: {
    handleChangeVerify() {
      this.trueCode = this.getRangeCode(4);
      numPic(this.trueCode, "canvas");
    },
    // 随机生成验证码值，也可由后端接口获取
    getRangeCode(len = 6) {
      const orgStr = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz123456789";
      let returnStr = "";
      for (var i = 0; i < len; i++) {
        returnStr += orgStr.charAt(Math.floor(Math.random() * orgStr.length));
      }
      return returnStr;
    },
  },
  mounted() {
    this.handleChangeVerify();
  },
};
</script>