<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{ border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="120" height="40"></canvas> <script type="text/javascript"> var canvas = document.getElementsByTagName(''canvas'')[0]; //开一张2D图 var context = canvas.getContext("2d"); var text = "A、B、C、D、E、F、G、H、I、J、K、L、M、N、O、P、Q、R、S、T、U、V、W、X、Y、Z、a、b、c、d、e、f、g、h、i、j、k、l、m、n、o、p、q、r、s、t、u、v、w、x、y、z、1、2、3、4、5、6、7、8、9、0"; textp = text.split("、"); //绘制一张从(0,0)开始的长120px 宽40px的图 context.strokeRect(0,0,120,40); draw(); canvas.onclick = function(){ context.clearRect(0,0,120,40); draw(); }; function draw(){ for(var i = 0;i<4;i++){ x = 20 + 20 * i; y = 20 + 20 * Math.random(); var index = Math.floor(Math.random()*textp.length); var txt = textp[index]; //我要写的字样 context.font="bold 20px 微软雅黑"; //我要写的字的颜色 context.fillStyle = getColor(); //我要把txt重获取的随机字符写在位于x与y的坐标上 context.fillText(txt,x,y); } //干扰线 for(var i = 0; i<6;i++){ context.beginPath(); context.moveTo(120*Math.random(),40*Math.random()); context.lineTo(120*Math.random(),40*Math.random()); context.strokeStyle = getColor(); context.stroke(); } function getColor(){ var red = Math.floor(Math.random()*256); var green = Math.floor(Math.random()*256); var blue = Math.floor(Math.random()*256); return "rgb("+red+","+green+","+blue+")"; } } function randNum(){ return } </script> </body> </html>
原生JS+canvas生成验证码
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
我要评论 0条评论,0条回复
请先登录后再评论
作者信息
最新评论
-
q6106579002021/1/25 22:15:59
-
评论于 网上流行的秒收录导航源码
-
评论于 微信视频号教程搜集汇总
-
评论于 微信视频号教程搜集汇总
-
评论于 《十月》2020.1
为您推荐