<canvas id="captchaCanvas" width="100" height="40"></canvas>function drawCaptcha(text) {const canvas = document.getElementById('captchaCanvas');const ctx = canvas.getContext('2d');// 设置背景颜色ctx.fillStyle = '#f0f0f0';ctx.fillRect(0, 0, canvas.width, canvas.height);// 随机生成颜色function randomColor() {return `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;}// 设置字体样式ctx.font = '30px Arial';ctx.fillStyle = randomColor();// 在 Canvas 上绘制文本，并给每个数字一个随机的位置和旋转角度for (let i = 0; i < text.length; i++) {const x = 15 + i * 20;const y = 30 + Math.random() * 8 - 4;const angle = Math.random() * 0.3 - 0.15; // -0.15 到 0.15 弧度ctx.save(); // 保存当前的画布状态ctx.translate(x, y); // 将原点移动到字符绘制位置ctx.rotate(angle); // 随机旋转字符ctx.fillText(text[i], 0, 0); // 绘制字符ctx.restore(); // 恢复画布状态}// 添加一些干扰线for (let i = 0; i < 5; i++) {ctx.strokeStyle = randomColor();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 < 30; i++) {ctx.fillStyle = randomColor();ctx.beginPath();ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, Math.PI * 2);ctx.fill();}
}