如何用canvas画出验证码

相信在平时的工作中，canvas肯定是我们不可或缺的伙伴，有很多业务场景都需要他来完成，闲来无事，今天我们就先说一下canvas如何画出验证码

• 
  
• 首先，我们应该有一个canvas标签（注意：可以标签里面设置宽高，也可以在js里面设置，但是不建议在style样式里面去设置，因为会导致里面的元素大小和你设置的不一样）。
  
• 然后我们需要有一个随机生成四位数code的一个方法
  

• 
  
• 然后我们还需要一个canvas的绘画方法
  

• 
  
• 因为当点击canvas的时候，canvas里面的code也就会变，这时候我们的随机生成四位数的方法就可以用上了。
  -上面这样已经可以在点击的时候生成二维码了，但是还是有一个问题，就是我们没有清空画布，所以导致了每次都是在之前的画布上面去生成，这样就出现文字叠加的问题，所以我们还需要清空画布
  
• 所以还需要一个清空画布的方法，这里我采用的是改变画布的大小的方法清空画布
  

• 
  
• 以上就是完整的一套二维码生成的流程了，以下是完整代码
  

<template>
<div class="main">
<div class="head">
<el-input v-model="ipt" placeholder="Please input" />
<canvas id="canvas" width="100" height="40" @click="SelectNumber"></canvas>
</div>
<div class="foot">
<el-button type="primary">Primary</el-button>
</div>
</div>
<div>
</div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { ElMessage } from 'element-plus'
let ipt = ref()
let num = ref()
// 生成二维码code
const generateCode = () => {
nextTick(() => {
const canvas = document.querySelector('#canvas')
const context = canvas.getContext('2d')

    context.font = 'oblique 20px Arial'

    context.fillStyle = '#fff'

    context.rotate(Math.PI * 1.4 / 180)

    context.fillText(num.value, 10, 25)

  })

}
// 获取四位随机数
const generateNum = () => {

  num.value = Math.floor(Math.random() * 4000 + 1000)

}
// 清空画布
const clearCanvas = () => {
nextTick(() => {
const canvas = document.querySelector('#canvas')

    canvas.width = 100

  })

}

// 触发画布切换验证码
const SelectNumber = () => {
clearCanvas()
generateNum()
generateCode()

}

const submit = () => {
if (num.value !== Number(ipt.value)) ElMessage.error('验证码输入错误')
else ElMessage.success('验证码输入正确')

}
generateNum()
generateCode()
</script><