html5 canvas绘制验证码需先创建canvas并获取2d上下文，再清空画布；接着用指定字符集（如abcdefghjklmnpqrstuvwxyz23456789）生成4–6位随机码；最后绘制干扰线、噪点和扭曲文字实现前端校验。
使用 HTML5 Canvas 绘制验证码，核心是通过 JavaScript 控制 Canvas 2D 上下文，在画布上动态生成干扰线、噪点、扭曲文字等视觉元素，实现轻量、可定制、无需后端图片资源的前端验证码。
1. 创建 Canvas 并获取绘图上下文
在 HTML 中声明一个 <canvas></canvas> 元素，并用 JavaScript 获取其 2D 渲染上下文，这是所有绘制操作的基础：
canvas id="captchaCanvas" width="120" height="40">
JavaScript 中初始化：
const canvas = document.getElementById('captchaCanvas');
const ctx = canvas.getContext('2d');
// 清空画布（避免重绘残留）
ctx.clearRect(0, 0, canvas.width, canvas.height);
2. 生成随机验证码文本
定义字符集（建议排除易混淆字符如 0/O、1/l/I），随机选取 4–6 位作为验证码内容：
- 推荐字符集：
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; - 生成示例：
let code = ''; for(let i=0; i - 将生成的
code存入内存（如全局变量或 data 属性），供后续校验使用
3. 绘制带干扰的文字与背景效果
利用 Canvas API 实现基础防识别能力，不依赖图像处理库：
-
设置文字样式：调整字体、大小、颜色，例如
ctx.font = 'bold 18px Arial'; ctx.fillStyle = '#333'; - 逐字绘制并添加扰动：对每个字符应用随机 x 偏移、y 偏移、旋转角度（-15°~15°）和缩放（0.9~1.1）
-
添加干扰线：用
ctx.beginPath()+ctx.moveTo()+ctx.lineTo()绘制 2–4 条浅灰斜线，线条宽度设为 0.5–1.5 -
添加噪点：循环绘制 50–100 个随机位置、极小半径（0.5–1px）、低透明度（
ctx.globalAlpha = 0.4）的实心圆
4. 可选：添加简单文字扭曲（非 SVG/滤镜）
纯 Canvas 不支持 CSS transform，但可通过逐像素偏移模拟轻微弯曲。更实用的做法是分段绘制：
- 将每个字符拆分为竖向小段（如每 2px 高为一段）
- 对每段沿正弦曲线横向偏移：
x += Math.sin(y * 0.1) * 3; - 用
ctx.fillText(char, x, y)在偏移后位置绘制该段字符（需配合ctx.save()/ctx.restore()） - 注意：此操作开销略高，4 字符+20 段以内性能无压力
完成绘制后，可绑定点击事件调用重绘函数实现“看不清，换一个”，整个流程完全运行在浏览器中，适合登录表单、评论提交等轻量验证场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
