前言

在当今数字化社会，验证码作为一种重要的安全验证手段，被广泛应用于各种网站和应用中，用以保护用户账号和数据的安全。自制验证码不仅可以提高用户体验，还可以有效防止恶意攻击和机器人行为。通过设计独特的验证码，不仅可以验证用户身份，还可以展示创意和设计的美感。

接下来我将介绍如何使用前端技术制作一个简单而具有挑战性的验证码，让您的网站更加安全和吸引人！

因为我们是用canvas标签进行创造，就没有了css部分，主要通过js的操作。

html部分

 <canvas id="canvas" width="120" height="40" onclick="draw()"></canvas>

我们的html部分十分简单，因为主要是在js里进行操作，我们这里只需要引入一个canvas标签即可，同时设置宽和高，然后定义一个点击事件，这个用来模拟我们点击验证码的更换操作。

js部分

准备工作

   let pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'

    function randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    }

    function randomColor(min, max) {
      const r = randomNum(min, max)
      const g = randomNum(min, max)
      const b = randomNum(min, max)
      return `rgb(${r},${g},${b})`
    }

我们必须要在绘制前做一些必要的准备工作。首先定义pool，这个是我们的二维码库，然后定义一个取随机数的函数，这里我们最终会获得[min,max) 的整数，然后我们的randomColor函数是用来取一个颜色的随机值。

定义整体大小

接下来我们所有的操作都将封装于draw函数内，让我们监听点击事件来更换每一次验证码。

  let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      // 填充色 随机
      ctx.fillStyle = randomColor(100, 230)
      ctx.fillRect(0, 0, canvas.width, canvas.height)

我们这里先获取页面元素，然后开始2D绘图，填充随机色，再规定填充面积范围。

随机生成字符串

 let imgCode = ''
      for (let i = 0; i < 4; i++) {
        const text = pool[randomNum(0, pool.length)]
        imgCode += text
        // 随机字体大小
        const fontSize = randomNum(18, 40)
        // 随机旋转角度
        const deg = randomNum(-30, 30)
        ctx.font = `${fontSize}px Simhei`
        ctx.textBaseline = 'top'
        ctx.fillStyle = randomColor(80, 150)
        ctx.save()  // 将当前状态封存入栈
        ctx.translate(30 * i + 15, 15)
        ctx.rotate((deg * Math.PI) / 180)
        ctx.fillText(text, -10, -15)
        ctx.restore() //

我们创建一个空字符串 imgCode 用于存储生成的验证码。 然后使用循环生成四个随机字符，并将其拼接到 imgCode 中。 再为每个字符设置随机的字体大小和旋转角度，并使用 ctx.font 设置字体大小和字体类型，ctx.textBaseline 设置基线对齐方式，ctx.fillStyle 设置填充颜色。 ctx.save() 将当前状态（包括当前的变换矩阵、剪切区域和其他样式设置）封存在栈中，以便后续的恢复。 ctx.translate(x, y) 平移画布原点至坐标 (30 * i + 15, 15)，即每个字符的位置。 使用 ctx.rotate(angle) 旋转 Canvas 坐标系统，角度为 deg。 ctx.fillText(text, x, y) 绘制文本，其中 text 是要绘制的字符，(x, y) 是字符的绘制位置。 ctx.restore() 恢复之前保存的状态，以确保后续绘制不受影响。

随机生成干扰线条

 for (let i = 0; i < 5; i++) {
        ctx.beginPath()
        ctx.moveTo(randomNum(0, canvas.width), randomNum(0, canvas.height))
        ctx.lineTo(randomNum(0, canvas.width), randomNum(0, canvas.height))
        ctx.strokeStyle = randomColor(100, 230)
        ctx.closePath()
        ctx.stroke()
      }
      

这段代码的作用是在 Canvas 上下文中绘制了五条连接两个随机位置的彩色线条，每条线的起点和终点都是随机生成的，颜色也是随机选择的。通过循环，可以创建出一个具有随机分布彩色线条的效果，从而增加视觉上的多样性和趣味性。

随机小点

for (let i = 0; i < 50; i++) {
        ctx.beginPath();
        ctx.arc(randomNum(0, canvas.width), randomNum(0, canvas.height), 1, 0, 2 * Math.PI);
        ctx.fillStyle = randomColor(100, 200);
        ctx.closePath();
        ctx.fill()
      }

我们使用 HTML5 Canvas 绘制了 50 个随机颜色的小圆点。它通过循环 50 次，在每次循环中绘制一个随机位置和随机颜色的小圆点。 我们通过ctx.beginPath()：开始一个新的绘图路径。 然后用ctx.arc(x, y, radius, startAngle, endAngle)：绘制一个圆。在这里，x 和 y 是圆心的坐标，radius 是圆的半径，startAngle 和 endAngle 分别是圆弧的起始角度和结束角度，这里使用了 0 到 2π 来绘制一个完整的圆。 再用ctx.fillStyle = color：设置填充颜色，这里使用了一个名为 randomColor 的函数来生成随机颜色。 通过ctx.closePath()：闭合当前路径。 最后ctx.fill()：填充当前路径。

最后整体封装于draw函数里，就可以达到我们想要的结果啦！

因为设置了监听点击事件，因此点击一次就会更换一次。