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);
}
