js实现图形验证码

实现图形验证码的步骤

生成随机字符串 使用Math.random()生成包含数字和字母的随机字符串，作为验证码的基础。

function generateRandomString(length) {
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

创建Canvas画布 通过HTML5 Canvas API绘制验证码图形，添加干扰线和噪点增加识别难度。

function createCaptcha(canvasId, text) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext('2d');

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 填充背景色
  ctx.fillStyle = '#f5f5f5';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制文字
  ctx.font = '30px Arial';
  ctx.fillStyle = '#333';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, canvas.width/2, canvas.height/2);

  // 添加干扰线
  for(let i = 0; i < 5; i++) {
    ctx.strokeStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
    ctx.beginPath();
    ctx.moveTo(Math.random()*canvas.width, Math.random()*canvas.height);
    ctx.lineTo(Math.random()*canvas.width, Math.random()*canvas.height);
    ctx.stroke();
  }

  // 添加噪点
  for(let i = 0; i < 100; i++) {
    ctx.fillStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
    ctx.fillRect(Math.random()*canvas.width, Math.random()*canvas.height, 1, 1);
  }
}

验证用户输入 将生成的验证码存储在变量中，与用户输入进行比较验证。

let captchaText = generateRandomString(6);

// 初始化验证码
createCaptcha('captchaCanvas', captchaText);

// 验证函数
function validateCaptcha() {
  const userInput = document.getElementById('captchaInput').value;
  if(userInput === captchaText) {
    alert('验证码正确');
    return true;
  } else {
    alert('验证码错误');
    // 刷新验证码
    captchaText = generateRandomString(6);
    createCaptcha('captchaCanvas', captchaText);
    return false;
  }
}

HTML结构示例 创建基本的HTML结构，包含Canvas元素和输入框。

<canvas id="captchaCanvas" width="200" height="60"></canvas>
<input type="text" id="captchaInput" placeholder="输入验证码">
<button onclick="validateCaptcha()">验证</button>
<button onclick="refreshCaptcha()">刷新</button>

刷新验证码功能 提供刷新按钮让用户重新获取验证码。

function refreshCaptcha() {
  captchaText = generateRandomString(6);
  createCaptcha('captchaCanvas', captchaText);
}