Canvas验证码是一种在网页上使用HTML5 Canvas元素生成的图形验证码。以下是一个简单的示例代码，用于生成和展示Canvas验证码：
HTML部分：
<canvas id="captchaCanvas" width="200" height="100"></canvas> <button onclick="generateCaptcha()">刷新验证码</button>
JavaScript部分:
function generateCaptcha() { var canvas = document.getElementById('captchaCanvas'); var context = canvas.getContext('2d'); // 生成随机验证码字符串 var captchaText = generateRandomCode(4); // 可自定义验证码长度 // 绘制背景色 context.fillStyle = '#f5f5f5'; context.fillRect(0, 0, canvas.width, canvas.height); // 绘制验证码文字 context.font = '30px Arial'; context.fillStyle = '#333'; context.fillText(captchaText, 50, 55); // 绘制干扰线 for (var i = 0; i < 6; i++) { context.strokeStyle = getRandomColor(); context.beginPath(); context.moveTo(getRandomNumber(0, canvas.width), getRandomNumber(0, canvas.height)); context.lineTo(getRandomNumber(0, canvas.width), getRandomNumber(0, canvas.height)); context.stroke(); } } // 生成指定范围内的随机整数 function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 生成随机颜色 function getRandomColor() { var r = getRandomNumber(0, 255); var g = getRandomNumber(0, 255); var b = getRandomNumber(0, 255); return 'rgb(' + r + ',' + g + ',' + b + ')'; } // 生成指定长度的随机验证码 function generateRandomCode(length) { var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var code = ''; for (var i = 0; i < length; i++) { code += characters.charAt(Math.floor(Math.random() * characters.length)); } return code; }
以上代码会在网页上显示一个Canvas元素和一个刷新按钮。点击刷新按钮时，会生成一个新的随机验证码并在Canvas上展示出来，同时绘制一些干扰线以增加验证码的可读性和安全性。
您可以根据实际需求自定义验证码的长度、字体样式、颜色等。此外，为了增加验证码的安全性，还可以考虑添加字体扭曲、噪点、阴影等效果，以防止机器自动识别。
