在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，老年精神病防止机器等非人操作，防止数据库被轻而易举的攻破。
验证码一般用php和java等后端语言编写；
但是在前端，用canva或者svg也可以绘制验证码；
直接上干货：
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas id="mycanvas" width="100" height="40"> 您的浏览器不支持canvas </canvas> </body&新疆有沙漠吗gt; <script type="text/javascript"> var mycanvas = document.getelementbyid("mycanvas"); var context = mycanvas.getcontext("2d"); //随机字符（透明度）（大小随机，位置随机）； var strstore = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789"; //随机函数 function roundnum(min, max) { return parint(math.random() * (max - min) + min); 计算机三级考试 } //文字内容部分： var str = ""; for(var i = 0; i < 5; i++) { context.beginpath(); //随机颜色（浅色：rgb - 200~250） var color = `rgb(${roundnum(0,255)},${roundnum(0,255)},${roundnum(0,255)})`; context.fillstyle = color; context.font = roundnum(20,30)+"px arial"; context.textalign = "center"; str = strstore[roundnum(0,strstore.length)]; context.filltext(str, 10 + 18 * i, roundnum(20,35)); } //10个左右的随机（长度随机，位置随机），干扰线 for(var j = 0; j < roundnum(5, 10); j++) { context.beginpath(); var color =蔡文姬简介 `rgb(${roundnum(0,255)},${roundnum(0,255直线距离公式)},${roundnum(0,255)})`; context.strokestyle = color; context.moveto(roundnum(0, 100), roundnum(0, 40)); context.lineto(roundnum(0, 100), roundnum(0, 40)); context.stroke(); } //干扰项：10个左右的随机（半径随机，位置随机），干扰圆 for(var j = 0; j < roundnum(5, 10); j++) { context.beginpath(); context.fillstyle = color; context.arc(roundnum(0, 100), roundnum(0, 40), roundnum(0, 5), math.pi * 2 / (roundnum(1, 360)), math.pi * 2 / (roundnum(1, 360))); context.fill(); } </script></html>结果如图：
至于要拿来咋用，就看大家高兴了。想怎么整这么整。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 08:12:40，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/02753ec4e3d086816c9737743a1e5769.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：canvas基础之图形验证码的示例.doc
本文 PDF 下载地址：canvas基础之图形验证码的示例.pdf
| 留言与评论（共有 0 条评论） |
