• 售前

  • 售后

热门帖子
入门百科

Html5生成验证码的示例代码

[复制链接]
永远爱你冰塘 显示全部楼层 发表于 2021-8-14 14:14:02 |阅读模式 打印 上一主题 下一主题
利用Html5的canvas标签天生画布,在画布上利用随机天生的数字画上验证码,背景为随机天生的颜色和紊乱的直线与点点。
进阶:利用表单插件属性绑定验证码数据(json)可以在发送时间大概异步通信进行背景数据获取与检查。
代码块
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>验证码</title>
  6. <style type="text/css">
  7.     #canvas{
  8.         cursor:pointer;
  9.     }
  10. </style>
  11. </head>
  12. <body>
  13.     <canvas id="canvas" width="150px" height="50px"></canvas>
  14. <script>
  15.         //生成随机数
  16.     function randomNum(min,max){
  17.         return Math.floor(Math.random()*(max-min)+min);
  18.     }
  19.         //生成随机颜色RGB分量
  20.     function randomColor(min,max){
  21.         var _r = randomNum(min,max);
  22.         var _g = randomNum(min,max);
  23.         var _b = randomNum(min,max);
  24.         return "rgb("+_r+","+_g+","+_b+")";
  25.     }
  26.     //先阻止画布默认点击发生的行为再执行drawPic()方法
  27.     document.getElementById("canvas").onclick = function(e){
  28.         e.preventDefault();
  29.         drawPic();
  30.     };
  31.     function drawPic(){
  32.         //获取到元素canvas
  33.         var $canvas = document.getElementById("canvas");
  34.         var _str = "0123456789";//设置随机数库
  35.         var _picTxt = "";//随机数
  36.         var _num = 4;//4个随机数字
  37.         var _width = $canvas.width;
  38.         var _height = $canvas.height;
  39.         var ctx = $canvas.getContext("2d");//获取 context 对象
  40.         ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
  41.         ctx.fillStyle = randomColor(180,240);//填充画布颜色
  42.         ctx.fillRect(0,0,_width,_height);//填充矩形--画画
  43.         for(var i=0; i<_num; i++){
  44.             var x = (_width-10)/_num*i+10;
  45.             var y = randomNum(_height/2,_height);
  46.             var deg = randomNum(-45,45);
  47.             var txt = _str[randomNum(0,_str.length)];
  48.             _picTxt += txt;//获取一个随机数
  49.             ctx.fillStyle = randomColor(10,100);//填充随机颜色
  50.             ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小,字体为SimHei
  51.             ctx.translate(x,y);//将当前xy坐标作为原始坐标
  52.             ctx.rotate(deg*Math.PI/180);//旋转随机角度
  53.             ctx.fillText(txt, 0,0);//绘制填色的文本
  54.             ctx.rotate(-deg*Math.PI/180);
  55.             ctx.translate(-x,-y);
  56.         }
  57.         for(var i=0; i<_num; i++){
  58.             //定义笔触颜色
  59.             ctx.strokeStyle = randomColor(90,180);
  60.             ctx.beginPath();
  61.             //随机划线--4条路径
  62.             ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
  63.             ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
  64.             ctx.stroke();
  65.         }
  66.         for(var i=0; i<_num*10; i++){
  67.             ctx.fillStyle = randomColor(0,255);
  68.             ctx.beginPath();
  69.             //随机画原,填充颜色
  70.             ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
  71.             ctx.fill();
  72.         }
  73.         return _picTxt;//返回随机数字符串
  74.     }
  75.     drawPic();
  76. </script>
  77. </body>
  78. </html>
复制代码
到此这篇关于Html5天生验证码的示例代码的文章就先容到这了,更多相干Html5天生验证码内容请搜索脚本之家从前的文章或继承欣赏下面的相干文章,希望大家以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作