您正在使用IPV4(3.236.253.192)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务      
虚位以待
2021年 冬至节 56
2021年 圣诞节 60
2022年 元 旦 67
2022年 春 节 98
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    Html5生成验证码的示例代码
    内容摘要: !DOCTYPEhtmlhtmlheadmetacharset='UTF-8'title验证码/titlestyletype='text/css'#canvas{cursor:pointer;}/style/headbodycanvasid='canvas'width='150px'height='50px'/canvasscript//生成随机数funct......
    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <title>验证码</title>

    <styletype="text/css">

    #canvas{

    cursor:pointer;

    }

    </style>

    </head>

    <body>

    <canvasid="canvas"width="150px"height="50px"></canvas>

    <script>

    //生成随机数

    functionrandomNum(min,max){

    returnMath.floor(Math.random()*(max-min)+min);

    }

    //生成随机颜色RGB分量

    functionrandomColor(min,max){

    var_r=randomNum(min,max);

    var_g=randomNum(min,max);

    var_b=randomNum(min,max);

    return"rgb("+_r+","+_g+","+_b+")";

    }

    //先阻止画布默认点击发生的行为再执行drawPic()方法

    document.getElementById("canvas").onclick=function(e){

    e.preventDefault();

    drawPic();

    };

    functiondrawPic(){

    //获取到元素canvas

    var$canvas=document.getElementById("canvas");

    var_str="0123456789";//设置随机数库

    var_picTxt="";//随机数

    var_num=4;//4个随机数字

    var_width=$canvas.width;

    var_height=$canvas.height;

    varctx=$canvas.getContext("2d");//获取context对象

    ctx.textBaseline="bottom";//文字上下对齐方式--底部对齐

    ctx.fillStyle=randomColor(180,240);//填充画布颜色

    ctx.fillRect(0,0,_width,_height);//填充矩形--画画

    for(vari=0;i<_num;i++){

    varx=(_width-10)/_num*i+10;

    vary=randomNum(_height/2,_height);

    vardeg=randomNum(-45,45);

    vartxt=_str[randomNum(0,_str.length)];

    _picTxt+=txt;//获取一个随机数

    ctx.fillStyle=randomColor(10,100);//填充随机颜色

    ctx.font=randomNum(16,40)+"pxSimHei";//设置随机数大小,字体为SimHei

    ctx.translate(x,y);//将当前xy坐标作为原始坐标

    ctx.rotate(deg*Math.PI/180);//旋转随机角度

    ctx.fillText(txt,0,0);//绘制填色的文本

    ctx.rotate(-deg*Math.PI/180);

    ctx.translate(-x,-y);

    }

    for(vari=0;i<_num;i++){

    //定义笔触颜色

    ctx.strokeStyle=randomColor(90,180);

    ctx.beginPath();

    //随机划线--4条路径

    ctx.moveTo(randomNum(0,_width),randomNum(0,_height));

    ctx.lineTo(randomNum(0,_width),randomNum(0,_height));

    ctx.stroke();

    }

    for(vari=0;i<_num*10;i++){

    ctx.fillStyle=randomColor(0,255);

    ctx.beginPath();

    //随机画原,填充颜色

    ctx.arc(randomNum(0,_width),randomNum(0,_height),1,0,2*Math.PI);

    ctx.fill();

    }

    return_picTxt;//返回随机数字符串

    }

    drawPic();

    </script>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:获取元素当前的高度和宽度 下一篇:HTML 罗盘式时钟的实现
    发布日期:2021/9/21
    手机扫二维码直达本页
    发布时间:11:00:14
    点击:358
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.6.10688 Build 21.10.13(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021