canvas绘制验证码

• 1.创建dentify.vue验证码组件

<!--
 * @Descripttion: 说明
 * @version: v1.0.0
 * @Author:
 * @Date: 2021-08-03 15:13:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-04 16:01:09
-->
<template>
  <div class="s-canvas">
    <canvas
      id="s-canvas"
      :width="contentWidth"
      :height="contentHeight"
    ></canvas>
  </div>
</template>
 
<script>
export default {
  name: "dentify",
  props: {
      identifyCode: {
          type: String,
          default: '1234'
      },
      fontSizeMin: {
          type: Number,
          default: 25
      },
      fontSizeMax: {
          type: Number,
          default: 30
      },
      backgroundColorMin: {
          type: Number,
          default: 255
      },
        backgroundColorMax: {
          type: Number,
          default: 255
      },
      colorMin: {
          type: Number,
          default: 0
      },
      colorMax: {
          type: Number,
          default: 160
      },
      lineColorMin: {
          type: Number,
          default: 100
      },
      lineColorMax: {
          type: Number,
          default: 255
      },
      dotColorMax: {
          type: Number,
          default: 255
      },
      dotColorMin: {
          type: Number,
          default: 0
      },
      contentWidth: {
          type: Number,
          default: 500
      },
      contentHeight: {
          type: Number,
          default: 200
      },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
      randomNum(min, max){
          return Math.floor(Math.random() * (max - min) + min)
      },
      randomColor(min, max){
          let r = this.randomNum(min, max)
          let g = this.randomNum(min, max)
          let b = this.randomNum(min, max)
          return `rgb(${r},${g},${b})`
      },
      drawPic(){
          let canvas = document.getElementById('s-canvas')
          let ctx = canvas.getContext('2d')
          ctx.textBaseline = 'bottom'
            //   绘制背景
          ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
        //   绘制文字
        for(let i = 0; i < this.identifyCode.length; i++){
            console.log(ctx,this.identifyCode[i],i)
            this.drawText(ctx, this.identifyCode[i], i)
        }
        this.drawLine(ctx)
        this.drawDot(ctx)
      },
      drawText(ctx, txt, i){
          ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
          ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
          let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
          let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
          var deg = this.randomNum(-45, 45)
        //   修改坐标远点和旋转角度
            ctx.translate(x, y)
            ctx.rotate(deg * Math.PI / 180)
            ctx.fillText(txt, 0, 0)
            // 恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI / 180)
            ctx.translate(-x, -y)
      },
    //   干扰线
      drawLine(ctx){
          for(let i = 0; i<3;i++){
              ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax);
              ctx.beginPath()
              ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
              ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
              ctx.stroke()
          }
      },
      drawDot(ctx){
        //   绘制干扰点
        for(let i = 0; i < 10; i ++){
            ctx.fillStyle = this.randomColor(0, 255)
            ctx.beginPath()
            ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 0, 0, 0, false);
            ctx.fill()
        }
      }

  },
  watch: {
    //   identifyCode
      identifyCode(){
          this.drawPic()
      }
  },
  mounted(){
      this.drawPic()
  }
};
</script>
 
<style scoped lang = "scss">
    .s-canvas{
        height: 38px;
    }
    .s-canvas canvas{
        margin-top: 1px;
        margin-left: 30px;
    }
</style>

• 2.登录页login.vue引入并使用组件

 import Dentify from './components/dentify.vue'
 export default {
		components: { Dentify },
		data(){
			return {
				  code: '',
		        identifyCodes: '1234567890abcdefghijklmnopqrstuvwsyz',
		        identifyCode: '',
			}
		}
	}
	mounted(){
			this.identifyCode = ''
	      this.makeCode(this.identifyCodes, 4)
	},
	methods: {
		 randomNum(min, max){
        	return Math.floor(Math.random()*(max-min)+min)
      },
      refreshCode(){
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      makeCode(o, l){
        for(let i = 0 ; i < l; i++){
          this.identifyCode += this.identifyCodes[this.randomNum(0,this.identifyCodes.length)]
        }
      },
      login(){
			    if(this.code.toLowerCase() != this.identifyCode.toLowerCase()){
		              this.$message({
		                message: '验证码错误！',
		                duration: 2000,
		                type: 'error'
		              })
	              this.refreshCode();
	              return
            }
		}
	}

• html

 <div @click="refreshCode">
 	<Dentify :identifyCode="identifyCode"/>
 </div>

• 转载https://blog.csdn.net/JQdazhuang/article/details/109577209