vue使用canvas生成登录验证码

# 在 components 文件夹下新建 Verification.vue

<template>
  <canvas id="canvas" @click="showNum" width="138" height="36"></canvas>
</template>

<script>
    export default {
      name: "Verification",
      data() {
        return {
          num: [],
          number: '',
        }
      },
      mounted(){
        this.draw(this.num);
        this.number =this.num.join().replace(/,/g,'');
      },
      methods: {
        /*点击更换-验证码*/
        showNum(){
          this.draw(this.num);
          this.number =this.num.join().replace(/,/g,'');
        },
        draw(num) {
          let canvas_width=138;
          let canvas_height=36;
          let canvas =document.getElementById("canvas");//获取到canvas的对象，演员
          let context =canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台

          canvas.width =canvas_width;
          canvas.height =canvas_height;

          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.toLowerCase(); toUpperCase()
            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();
          }
        },
        //得到随机的颜色值
        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 +")";
        },

      }
    }
</script>

<style scoped>

</style>

# 组件内使用

<template>
  <div>
    <Verification ref="verification_code"></Verification>
  </div>
</template>

<script>
  import Verification from '@/components/Verification'
    export default {
      name: "index",
      components:{
        Verification,
      },
      data() {
        return {
        }
      },
      mounted() {
        console.log(this.$refs.verification_code.number);
      },
    }
</script>

<style scoped>
</style>

参考博客：

1. canvas登录验证码生成