社区公告:
    爆款云产品,限时折扣 腾讯云学生服务器10元优惠套餐 新用户千方百计送大礼,2660+元云上大礼包免费领取中! 领取宝塔管理面板3188红包! 腾讯云新客户无门槛领取2860元代金券
    发新帖

    JavaScript生成随机验证码代码实例

      [复制链接]
    147 34
    吾爱程序猿致力于打造专业优质的IT学习分享社区。站内所发布的一切文章、软件及附件信息全部来源于网络用户分享,仅限用于学习和研究目的,不得将上述内容用于商业或者非法用途。否则,一切后果请用户自负。
    本站仅提供学习分享平台,站内信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。
    站内所有言论纯属会员个人意见,与本论坛立场无关。严禁在本站发布政治反动、色情、暴力等不良信息和违法内容。
    吾爱程序猿作为网络平台提供者,对非法转载、盗版行为的发生不具备充分的监控能力。但是当版权拥有者提出侵权指控并出示充分的版权证明材料时,吾爱程序猿负有移除非法转载和盗版内容以及停止继续传播的义务。
    吾爱程序猿为用户免费分享产生,如果侵犯了您的权益,请及时联系右侧客服或管理员,我们将尽快处理。

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    利用canvas制作一个随机验证码:

      1、clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素

      2、fillStyle:设置画笔的颜色

      3、rotate(deg):旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )

      4、translate(): 方法重新映射画布上的位置  

      5、Math.random():获取0-1之间的一个随机数,不包含1




    11935d8f6a4130f82.png



    1. <!-- HTML -->
    2. <!DOCTYPE html>
    3. <html>
    4.   <head>
    5.     <meta charset="utf-8">
    6.     <title>canvas随机验证码</title>
    7.   </head>
    8.   <body>
    9.     <canvas id="canvas" width="100" height="40" style="border: 1px solid red;display: block;margin: 0 auto;"></canvas>
    10.   </body>
    11.   <script type="text/Javascript">
    12.     var myCanvas = document.querySelector("#canvas");
    13.     var blur = myCanvas.getContext("2d");
    14.     // 当点击画布时创建一个新的路径
    15.     // 验证码封装
    16.     myCanvas.onclick = function() {
    17.       // 实现点击画布创建一个新的验证码
    18.       blur.clearRect(0,0,100,40);
    19.       verify();
    20.     }
    21.     verify();
    22.     function verify() {
    23.       // 绘制矩形框
    24.       // blur.strokeRect(0,0,100,40);
    25.       // 随机验证码
    26.       var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
    27.         "v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
    28.         "Z"
    29.       ];
    30.       // 显示四位数的验证码
    31.       for (var i = 0; i < 4; i++) {
    32.         var x = 20 + 20 * i;
    33.         var y = 20 + 10 * Math.random();
    34.         // console.log(x,y);
    35.         // 在数组中获取到随机的索引整数
    36.         var index = Math.floor(Math.random() * arr.length);
    37.         // 通过随机的索引获取到随机的元素
    38.         var texts = arr[index];
    39.         // 设置验证码的相关样式
    40.         blur.font = "bold 20px 微软雅黑";
    41.         blur.fillStyle = textColor();
    42.         // 画布旋转显示
    43.         // translate() 方法重新映射画布上的位置
    44.         blur.translate(x, y);
    45.         // 将画布旋转,旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 )
    46.         var deg = 90 * Math.random() * Math.PI / 180;
    47.         blur.rotate(deg); //
    48.         blur.fillText(texts, 0, 0);
    49.         // 将画布映射返回原来的位置
    50.         blur.rotate(-deg);
    51.         blur.translate(-x, -y);
    52.       }
    53.       
    54.       // 制作验证码的干扰线制作
    55.       for(var i=0;i<6;i++){
    56.         blur.beginPath();
    57.         blur.moveTo(Math.random()*100,Math.random()*40);
    58.         blur.lineTo(Math.random()*100,Math.random()*40);
    59.         // 设置干扰线的颜色
    60.         blur.strokeStyle=textColor();
    61.         blur.stroke();
    62.       }
    63.       // 制作验证码的干扰圆点
    64.       for(var i=0;i<20;i++){
    65.         blur.beginPath();
    66.         var x=Math.random()*100;
    67.         var y=Math.random()*100;
    68.         blur.moveTo(x,y);
    69.         blur.lineTo(x+1,y+1);
    70.         // 设置干扰线的颜色
    71.         blur.strokeStyle=textColor();
    72.         blur.stroke();
    73.       }
    74.     }
    75.     // 获取随机颜色封装
    76.     function textColor(){
    77.       var red=Math.floor(Math.random()*256);
    78.       var green=Math.floor(Math.random()*256);
    79.       var blue=Math.floor(Math.random()*256);
    80.       return "rgb("+red+","+green+","+blue+")";
    81.     }
    82.   </script>
    83. </html>
    复制代码

    觉得有用的亲, 请给我打赏哟!谢谢各位大佬~

    举报 使用道具

    回复

    精彩评论34

    moonsin   发表于 2019-9-28 23:58:18 | 显示全部楼层
    感谢大佬分享

    举报 使用道具

    回复 支持 反对
    快乐学习   发表于 2019-9-29 01:05:11 | 显示全部楼层
    感谢大佬分享

    举报 使用道具

    回复 支持 反对
    happyson10   发表于 2019-9-29 04:00:57 | 显示全部楼层
    thanks for sharing

    举报 使用道具

    回复 支持 反对
    amoi3000   发表于 2019-9-29 08:20:20 | 显示全部楼层
    感谢分享~~~~~

    举报 使用道具

    回复
    bennyyuan1990   发表于 2019-9-29 08:30:35 | 显示全部楼层
    JavaScript生成随机验证码代码实例

    举报 使用道具

    回复 支持 反对
    kuokuozaxian   发表于 2019-9-29 08:37:48 | 显示全部楼层
    {:2_30:}{:2_30:}{:2_30:}

    举报 使用道具

    回复
    timshinlee   发表于 2019-9-29 08:58:22 | 显示全部楼层
    4890611132123

    举报 使用道具

    回复 支持 反对
    chenxin   发表于 2019-9-29 09:05:32 | 显示全部楼层
    啥也不说了,吾爱程序猿社区就是给力!

    举报 使用道具

    回复 支持 反对
    給我个完美程序   发表于 2019-9-29 09:12:55 | 显示全部楼层
    这是一个很真诚的回复,666   强帖

    举报 使用道具

    回复 支持 反对
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    234

    积分

    230

    学币

    4

    帖子

    【新用户限量秒杀】热门云产品限量秒杀,云服务器1核1G 首年99元

    快速回复 返回顶部 返回列表