记录--如何用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>

本文转载于:

https://juejin.cn/post/7269290896214212642

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。