vue 使用canvas生成含干扰线的验证码

骑猪看日落 2022-03-26 03:56 112阅读 0赞

效果图：

![20190115153200480.png][]

.ts

mounted() {
        this.createCode();
      }
    
      private rand() {
        let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        let arr = str.split("");
        let ranNum = Math.floor(Math.random() * 36);
        let randomCode = arr[ranNum];
        return randomCode;
      }
    
      private drawline(canvas, context) {
        context.beginPath();
        context.moveTo(
          Math.floor(Math.random() * (this as any).canvasWidth),
          Math.floor(Math.random() * (this as any).canvasHeight)
        );
        context.lineTo(
          Math.floor(Math.random() * (this as any).canvasWidth),
          Math.floor(Math.random() * (this as any).canvasHeight)
        );
        context.lineWidth = 1;
        context.strokeStyle = "#275DB3";  // 干扰线条的颜色
        context.stroke();
      }
    
      private createCode() {
        let code = "";
        let myCanvas = this.$refs.mycanvas as IndexObject;
        let context = myCanvas.getContext("2d");
        context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        context.strokeStyle = "#FFF";  // 边框的颜色
        // context.fillStyle="red"; 字体的颜色
        context.strokeRect(0, 0, this.canvasWidth, this.canvasHeight);
        for (let i = 0; i < 20; i++) {
          this.drawline(myCanvas, context);
        }
        for (let k = 0; k < 4; k++) {
          context.font = "20px Arial";
          context.save();
          let rA = 1 - Math.random() * 2;
          let angle = rA / 8;
          let ranNum = this.rand();
          context.rotate(angle);
          context.fillText(ranNum, 18 * k + 4, 25);
          context.restore();
          code += ranNum;
        }
        this.verificationCode = code;
      }
    
    比较：if (this.confirmCode.toUpperCase() !== this.verificationCode) {
          console.log("验证码输入错误!");
        }

.vue

[20190115153200480.png]: /images/20220326/dd50bbcad6d44a7bbf60d5eed566e2ba.png