<!DOCTYPE html> <html> <body> <h2>登录界面</h2> <!-- form表示表单 --> <form id="loginForm"> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br> <label for="captcha">验证码:</label><br> <input type="text" id="captcha_input" name="captcha"><br> <canvas id="captcha" width="100" height="50"></canvas><br> <!-- canvas表示图 --> <input type="button" value="提交" onclick="submitForm()"> </form> </body> <script> window.onload = function() { generateCaptcha(); /* 方便用于再网页加载完毕后立刻执行的操作 */ }; function generateCaptcha() { /* 36表示36进制的包含字符0-9,a-z 10进制0-9 16进制0-9,a-f substring(2,8) 标志从第2个字符开始到第7个字符结束,就是6为随机生成码 */ var captcha = Math.random().toString(36).substring(2, 8); // 生成一个随机验证码 var canvas = document.getElementById('captcha'); //可以获取'captcha'元素改变其内容 var ctx = canvas.getContext('2d'); //getContext()方法可返回一个用于在画布上绘图的环境 ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的验证码 '2d'表示二维 ctx.font = '30px Arial'; //font可以设置字体样式 //fillText()方法用于在画布上绘制填充的文本,文本默认为黑色context.fillText(text,x,y,maxWith) //text指要写入的文本,x:此参数从何处开始文本的x坐标,y:此参数从何处结束文本的y坐标 ctx.fillText(captcha, 10, 35); // 在canvas上画出新的验证码 sessionStorage.setItem('captcha', captcha); // 将验证码存储在sessionStorage中,以便后续验证 } function submitForm() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; var captchaInput = document.getElementById('captcha_input').value; var captcha = sessionStorage.getItem('captcha'); if (captchaInput === captcha) { // 如果输入的验证码和实际的验证码匹配 alert('登录成功!用户名:' + username); } else { alert('验证码错误!请重新输入。'); generateCaptcha(); // 如果验证码错误,重新生成一个新的验证码 } } </script> </html>
标签:canvas,javascript,ctx,验证码,captcha,getElementById,html,var From: https://www.cnblogs.com/aixin52129211/p/17700656.html