JQ+canvas验证码

最新推荐文章于 2024-10-01 20:12:28 发布

一万种可能-码农

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量148

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/xiaoxian_xian/article/details/109018117

版权

<head>
    <meta charset="UTF-8">
    <title>验证码</title>
</head>

<body>
  <canvas id="identify"></canvas>
  <button id="changeCode">看不清，换一个</button>
</body>
<script type="text/javascript">
  class IdentifyCode {
    constructor(canvasId, width, height) {
      this.width = width;
      this.height = height;
      this.canvas = document.querySelector(canvasId);
      this.ctx = this.canvas.getContext("2d");
      this.code = "";
      this.codeRange = [];
      this.generateCodeRange();
      this.freshCode();
    }
    //
    initCanvas() {
      this.canvas.width = this.width;
      this.canvas.height = this.height;
    }

    // 生成随机色
    randomColor() {
      var colorStr = "#";
      for(let i = 0; i < 6; i++) {
          colorStr += Math.floor(Math.random() * 16).toString(16);
      }
      return colorStr;
    }
    // 生成二维码字母范围
    generateCodeRange() {
      var codeRange = [];
      for(let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
          codeRange.push(String.fromCharCode(i));
      }
      for(let i = "a".charCodeAt(0); i <= "z".charCodeAt(0); i++) {
          codeRange.push(String.fromCharCode(i));
      }
      for(let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
          codeRange.push(String.fromCharCode(i));
      }
      this.codeRange = codeRange;
      // return codeRange;
    }
    // 生成四位随机数
    randomCode() {
      this.code = "";
      var len = this.codeRange.length;
      for(let i = 0; i < 4; i++) {
          this.code += this.codeRange[Math.floor(Math.random() * len)];
      }
    }

    // 画背景色
    drawBackground() {
      var bgColor = "#b0aa93";
      //        console.log(bgColor)
      this.ctx.rect(0, 0, this.width, this.height);
      this.ctx.fillStyle = bgColor;
      this.ctx.fill();
    }

    // 画干扰线
    drawDisturbLines() {
      for(let i = 0; i < 4; i++) {
        this.drawOneLine();
      }
    }
    drawOneLine() {
      var startX = Math.floor(Math.random() * this.width);
      var startY = Math.floor(Math.random() * this.height);
      var endX = Math.floor(Math.random() * this.width);
      var endY = Math.floor(Math.random() * this.height);
      this.ctx.strokeStyle = this.randomColor();
      this.ctx.lineWidth = Math.ceil(Math.random() * 2);
      this.ctx.beginPath();
      this.ctx.moveTo(startX, startY);
      this.ctx.lineTo(endX, endY);
      this.ctx.closePath();
      this.ctx.stroke();
    }

    // 画干扰点
    drawDisturbDots() {
      for(let i = 0, count = this.width * this.height / 100; i < count; i++) {
        this.drawOneDot();
      }
    }
    drawOneDot() {
      var ox = Math.floor(Math.random() * this.width);
      var oy = Math.floor(Math.random() * this.height);
      this.ctx.fillStyle = this.randomColor();
      this.ctx.beginPath();
      this.ctx.arc(ox, oy, 1, 0, 2 * Math.PI);
      this.ctx.closePath();
      this.ctx.fill();
    }

    // 画文字(数字或字母)
    drawLetters() {
      for(let i = 0, len = this.code.length; i < len; i++) {
        let offsetX = this.width * 0.15; // 中间的70%画字母，两边各15%
        let offsetY = this.height * 0.15;
        let lineHeight = this.height * 0.7;
        let x = i * this.width * 0.7 / this.code.length + offsetX;
        let y = this.height / 2;
        let letter = this.code[i];
        let fontSize = Math.min(parseInt(this.height), parseInt(this.width * 0.7));
        //console.log(fontSize)
        this.drawOneLetter(letter, x, y, fontSize);
      }
    }
    drawOneLetter(letter, x, y, fontSize) {
      this.ctx.font = fontSize + "px Times new roman";
      this.ctx.textBaseline = "middle";
      this.ctx.fillStyle = this.randomColor();
      this.ctx.fillText(letter, x, y);
    }

    // 更换一个验证码
    freshCode() {
      this.clear();
      this.randomCode();
      //console.log(this.code);
      this.initCanvas();
      this.drawBackground();
      this.drawDisturbLines();
      this.drawDisturbDots();
      this.drawLetters();
    }
    // 清除画布
    clear() {
      this.ctx.clearRect(0, 0, this.width, this.height);
    }
  }
</script>
<script type="text/javascript">
  var identifyCode = new IdentifyCode("#identify", 100, 40);
  console.log(identifyCode.code);
  var changeCode = document.querySelector("#changeCode");
  changeCode.onclick = function() {
    identifyCode.freshCode();
    console.log(identifyCode.code);
  }
</script>