验证码可通过 JavaScript 生成：生成随机字符串获取要显示验证码的 DOM 元素创建画布元素并获取上下文设置画布样式将验证码绘制到画布上模糊验证码验证时获取用户输入并比较字符串，返回结果
如何使用 JavaScript 生成验证码
概述
验证码是一种广泛用于防止机器人滥用网站的图像谜题。通过 JavaScript 可以轻松生成和验证验证码。
生成验证码
-
随机生成一个字符串：使用
Math.random()生成一个随机数字，并将其转换为字符串。 - 获取 DOM 元素：获取页面中要显示验证码的 DOM 元素。
-
创建画布元素：在 DOM 元素中创建一个
元素。 - 获取画布上下文：从画布元素中获取绘图上下文。
- 设置画布样式：设置画布的背景颜色、字体和文本颜色。
-
绘制验证码：使用
fillText()方法将随机字符串绘制到画布上。 -
模糊验证码：使用
blur()方法将验证码模糊，增加识别难度。
验证验证码
- 获取用户输入：获取用户在验证码输入框中输入的字符串。
- 比较字符串：将用户输入的字符串与生成的随机字符串进行比较。
-
返回结果：如果字符串匹配，返回
true；否则，返回false。
示例代码
function generateCaptcha() {
// 生成随机字符串
const str = Math.random().toString(36).substring(7);
// 获取 DOM 元素
const canvas = document.getElementById("captcha");
// 获取画布上下文
const ctx = canvas.getContext("2d");
// 设置画布样式
ctx.fillStyle = "#ffffff";
ctx.font = "20px Arial";
ctx.fillStyle = "#000000";
// 绘制验证码
ctx.fillText(str, 10, 25);
// 模糊验证码
ctx.blur(2);
}
function validateCaptcha() {
// 获取用户输入
const userInput = document.getElementById("captcha-input").value;
// 比较字符串
const isMatched = userInput === str;
// 返回结果
return isMatched;
} 
