vue使用canvas生成验证码

components/Verification.vue

<template>
  <div>
     <el-tooltip class="item" effect="dark" content="点击更换验证码" placement="right-end">
      <canvas style="cursor: pointer;" id="canvas" @click="showNum" width="138" height="36"></canvas>
    </el-tooltip>
 </div>
</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>

src/login/Login.vue

<template>
  <div class="login">
    <vue-particles
      color="#409EFF"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="6"
      linesColor="#409EFF"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="login-box">
      <div class="avatar"><img src="../../assets/img/img.png" alt="" /></div>
      <el-form
        :model="loginForm"
        label-position="right"
        :rules="loginRules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="admin"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="123456"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="yzm">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple">
                <el-input
                  v-model="loginForm.yzm"
                  placeholder="请输入验证码"
                ></el-input></div
            ></el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple-light" @click="yzm">
                <Verification ref="verification_code"></Verification> // 调用组件
                </div></el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Verification from "@/components/Verification"; // 引入
export default {
  name: "Login",
  components: {
    Verification // 注册组件
  },
  data() {
    var validateusername = (rule, value, callback) => {
        if (value === ''||value===undefined) {
          callback(new Error('请输入用户名'));
        }  else {
          callback();
        }
      };
      var validatepassword = (rule, value, callback) => {
        if (value === ''||value===undefined) {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
    var validateyzm = (rule, value, callback) => {
        if (value === ''||value===undefined) {
          callback(new Error('请输入验证码'));
        } else if (value !== this.$refs.verification_code.number) {  // 判断用户输入值是否相等
          callback(new Error('验证码错误'));
        } else {
          callback();
        }
      };
    return {
      loginForm: {
        username: "admin",
        password: "123456",
        yam: ""
      },
      loginRules: {
        username: [
          {  validator:validateusername, trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户名长度在3-10个字符之间",
            trigger: "blur"
          }
        ],
        password: [
          {  validator:validatepassword, trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "密码长度在6-15个字符之间",
            trigger: "blur"
          }
        ],
        yzm: [{ validator:validateyzm, trigger: "blur" }]
      }
    };
  },
  mounted() {},
  methods: {
    yzm() {
      console.log(this.$refs.verification_code.number);
    },
    reset() {
      this.$refs.ruleForm.resetFields();
    },
    login() {
      this.$refs.ruleForm.validate(valid => {
        if (valid === true) {
          window.sessionStorage.setItem("token", this.loginForm.username);
          this.$router.push("/home");
        }
      });
    }
  }
};
</script>

<style scoped>
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
.login {
  height: 100%;
  background: -webkit-linear-gradient(top, #ababcd, white);
  background-image: url("../../assets/img/bk.jpg");
  background-size: cover;
}
.login >>> input {
  color: #61bfff;
  border: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent;
}
.login-box {
  width: 450px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  background: -webkit-linear-gradient(220deg, rgba(53, 57, 74, 0), #000);
  background: -o-linear-gradient(220deg, rgba(53, 57, 74, 0) 0, #000 100%);
  background: linear-gradient(230deg, rgba(53, 57, 74, 0), #000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="rgba(53, 57, 74, 0)",endColorstr="rgb(0, 0, 0)",GradientType=1);
  -webkit-box-shadow: -15px 15px 15px rgb(0 0 0 / 40%);
  box-shadow: -15px 15px 15px rgb(0 0 0 / 40%);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.avatar {
  width: 100px;
  position: absolute;
  top: -50px;
  left: 50%;
  background-color: #fff;
  transform: translateX(-50%);
  border: 1px solid #eeeeee;
  border-radius: 50%;
  height: 100px;
}
.avatar img {
  width: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 5px;
}
.el-form {
  margin-top: 70px;
  padding: 0 20px 0 0;
}
</style>

最后介绍一下上面使用到的动态粒子插件属性说明

vue-particles的属性：
color: String类型。默认’#dedede’。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认’circle’。可用的粒子外观类型有：“circle”,“edge”,“triangle”, “polygon”,“star”。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认’#dedede’。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: “grab”, “repulse”, “bubble”。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”

最后来上一个效果图