前端绘制验证码示例

该示例从实际应用剖析canvasApi的使用场景，以及使用方法vue完整源码

html

<canvas id="yzm"></canvas>

该实例应用到的全局变量

var code = '' // 验证码
const canvas = document.getElementById('yzm'), // canvas 元素
  ctx = canvas.getContext('2d'), // canvas画板，
  w = 120, // canvas 宽度
  h = 60, // canvas 高度
  codeLen = 4 // 验证码长度
// 设置canvas宽高
canvas.width = w
canvas.height = h

该实例应用到的其他函数

  // 生成随机数
 function randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
 }
// 随机色生成
function randomColor(min, max) {
  return `rgb(randomNum(min, max), randomNum(min, max), randomNum(min, max))`
}

生成验证码

function getYzm() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789', charsLen = chars.length
  code = ''
  for (let i = 0; i < codeLen; i++) {
    code += chars.charAt(randomNum(0, charsLen))
  }
}

canvas背景绘制

const canvas = document
function drawBg() {
  // 此处我们使用浅色系作为验证码的背景颜色
  ctx.fillStyle = randomColor(200, 255)
	ctx.fillRect(0, 0, w, h)
}

api介绍

fillStyle: 改变填充颜色；设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色)

fillRect: fillRect(x,y,width,height) 方法定义了矩形当前的填充方式;x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

canvas 绘制验证码

function drawText() {
  const jg = this.w / codeLen, // 获取文字所占空间大小
    fontMax = Math.min(jg * 1.6, h - 5), // 定义最大字体取值
    fontMin = fontMax / 1.3 // 定义最小字体取值
  let before = codeLen // 设置上一次x轴偏移量默认值
  for (let i = 0; i < codeLen; i++) {
    const font = randomNum(fontMin, fontMax), // 获取随机字体大小
      xMin = before + font / 6 - i, // 获取x轴最小偏移量
      xMax = jg * i + font / 6 - i, // 获取x轴最大偏移量，满足左侧和右侧不会靠边显示
      x = randomNum(xMin, xMax), // 设置x轴偏移量
      y = this.randomNum(font, this.h - 10), // 设置y轴偏移量
      deg = this.randomNum(-30, 30) * Math.PI / 180 // 设置字体旋转角度
    ctx.font = font + 'px simHei' // 设置字体大小
    ctx.textBaseline = 'alphabetic' // 设置基线对齐
    ctx.fillStyle = this.randomColor(50, 100) // 设置填充颜色
    ctx.translate(x, y) // 设置偏移量，更改旋转中心点
    ctx.rotate(deg) // 设置旋转角度
    ctx.fillText(code[i], 0, 0) // 填充文字
    ctx.rotate(-deg) // 画布旋转回初始位置
    ctx.translate(-x, -y) // 重置偏移量，更改旋转中心
    before = x + font / 2 // 设置上一次x轴偏移量
  }
}

api介绍

textBaseline： 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。基线值不同对文字的影响如下图：

translate：移动 canvas 和它的原点到一个不同的位置。

rotate：以原点为中心旋转 canvas。

fillText：fillText(text, x, y[, maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

绘制干扰线

function drawLine() {
	let len = randomNum(1, 6) // 设置干扰线个数
  for (; len > 0; len--) {
    ctx.strokeStyle = randomColor(150, 200)
    ctx.beginPath()
    ctx.moveTo(randomNum(0, w), randomNum(0, h))
    ctx.lineTo(randomNum(0, w), randomNum(0, h))
    ctx.stroke()
  }
}
function drawDot() {
  let len = randomNum(10, 30) // 设置干扰项个数
  for (; len > 0; len--) {
    ctx.fillStyle = randomColor(100, 150)
    ctx.beginPath()
    ctx.arc(randomNum(0, w), randomNum(0, h), 1, 0, 2 * Math.PI)
    ctx.fill()
  }
}