vue中用Canvas实现验证码功能

vue中用Canvas实现验证码功能(typescript)

Verification.vue

<template>
  <canvas
    id="canvas"
    @click="showNum"
  ></canvas>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
@Component({})
export default class Product extends Vue {
  private num!: string[];
  private number!: string;
  data() {
    return {
      num: [],
      number: ""
    };
  }
  /**
   * @description:展示验证码
   */
  showNum() {
    this.draw(this.num);
    this.number = this.num.join().replace(/,/g, "");
  }
  /**
   * @description:画出验证码
   */
  draw(num: string[]) {
    let canvas_width = 138;
    let canvas_height = 36;
    let canvas = <HTMLCanvasElement>document.getElementById("canvas"); //获取到canvas的对象,演员
    let context = <CanvasRenderingContext2D>canvas.getContext("2d"); //获取到canvas画图的环境,演员表演的舞台

    canvas.width = canvas_width;
    canvas.height = canvas_height;
    context.fillStyle = "#cccccc";
    context.fillRect(0, 0, 300, 200);
    let sCode =
      "A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    let aCode = sCode.split(",");
    let aLength = aCode.length; //获取到数组的长度

    for (let i = 0; i <= 3; i++) {
      let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
      let deg = (Math.random() * 15 * Math.PI) / 180; //产生0~30之间的随机弧度
      let txt = aCode[j]; //得到随机的一个内容
      num[i] = txt;

      let x = 20 + i * 30; //文字在canvas上的x坐标
      let y = 20 + Math.random() * 8; //文字在canvas上的y坐标
      context.font = "bold 23px 微软雅黑";
      context.translate(x, y);
      context.rotate(deg);
      context.fillStyle = this.randomColor();
      context.fillText(txt, 0, 0);
      context.rotate(-deg);
      context.translate(-x, -y);
    }
    for (let i = 0; i <= 5; i++) {
      //验证码上显示线条
      context.strokeStyle = this.randomColor();
      context.beginPath();
      context.moveTo(
        Math.random() * canvas_width,
        Math.random() * canvas_height
      );
      context.lineTo(
        Math.random() * canvas_width,
        Math.random() * canvas_height
      );
      context.stroke();
    }
    for (let i = 0; i <= 30; i++) {
      //验证码上显示小点
      context.strokeStyle = this.randomColor();
      context.beginPath();
      let x = Math.random() * canvas_width;
      let y = Math.random() * canvas_height;
      context.moveTo(x, y);
      context.lineTo(x + 1, y + 1);
      context.stroke();
    }
    this.number = this.num.join().replace(/,/g, "");
  }
  /**
   * @description:得到随机颜色
   */
  randomColor() {
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }

  activated() {
    this.draw(this.num);
  }
}
</script>
展开阅读全文
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值