前端0~9随机生成4位数验证码

<template>
  <div>
    <canvas id ="canvas" width=120% height=33px  @click = "handleCanvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "code",
  data(){
    return{
      codeList:[],
      comparisonValue:""
    }
  },
  methods:{
    handleCanvas(){
      this.draw(this.codeList)
    },
    draw (showNum) {
      let canvasWidth = document.querySelector('#canvas').clientWidth
      let canvasHeight = document.querySelector('#canvas').clientHeight
      let canvas = document.getElementById('canvas') // 获取到canvas
      let context = canvas.getContext('2d') // 获取到canvas画图
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      let sCode =  '1,2,3,4,5,6,7,8,9,0'
      let aCode = sCode.split(',')
      let aLength = aCode.length // 获取到数组的长度

      // 4个验证码数
      for (let i = 0; i <= 3; i++) {
        let j = Math.floor(Math.random() * aLength) // 获取到随机的索引值
        let deg = Math.random() * 30 * Math.PI / 180 // 产生0~30之间的随机弧度
        let txt = aCode[j] // 得到随机的一个内容
        showNum[i] = txt // 依次把取得的内容放到数组里面
        let x = 10 + i * 20 // 文字在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)
      }
      // 验证码上显示10条线条
      for (let i = 0; i <= 10; i++) {
        context.strokeStyle = this.randomColor()
        context.beginPath()
        context.moveTo(
            Math.random() * canvasWidth,
            Math.random() * canvasHeight
        )
        context.lineTo(
            Math.random() * canvasWidth,
            Math.random() * canvasHeight
        )
        context.stroke()
      }
      // 验证码上显示100个小点
      for (let i = 0; i <= 100; i++) {
        context.strokeStyle = this.randomColor()
        context.beginPath()
        let x = Math.random() * canvasWidth
        let y = Math.random() * canvasHeight
        context.moveTo(x, y)
        context.lineTo(x + 1, y + 1)
        context.stroke()
      }

      // 最后把取得的验证码数组存起来，方式不唯一
      let num = showNum.join('')
      this.comparisonValue = num.toLowerCase()
    },
    // 得到随机的颜色值
    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>