html5如何生成验证码

思路介绍：

可以利用htML5的canvas标签先生成画布，然后在画布上利用随机数字生成验证码，背景用随机颜色和杂乱的直线来代替。

（学习视频分享：HTML5视频教程）

高级方法：

利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。

具体代码：

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    验证码/title>
    style type="text/css">
    #canvas{
            cursor:pointer;
    }
    /style>
    /head>
    body>
        canvas id="canvas" width="150px" height="50px">
    /canvas>
    script>
        //生成随机数    function randomNum(min,max){
            return Math.floor(Math.random()*(max-min)+min);
    }
        //生成随机颜色RGB分量    function randomColor(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();
    }
    ;
    function drawPic(){
            //获取到元素canvas        var $canvas = document.getElementById("canvas");
            var _str = "0123456789";
    //设置随机数库        var _picTxt = "";
    //随机数        var _num = 4;
    //4个随机数字        var _width = $canvas.width;
            var _height = $canvas.height;
            var ctx = $canvas.getContext("2d");
    //获取 context 对象        ctx.textBaseline = "bottom";
    //文字上下对齐方式--底部对齐        ctx.fillStyle = randomColor(180,240);
    //填充画布颜色        ctx.fillRect(0,0,_width,_height);
    //填充矩形--画画        for(var i=0;
     i_num;
 i++){
                var x = (_width-10)/_num*i+10;
                var y = randomNum(_height/2,_height);
                var deg = randomNum(-45,45);
                var txt = _str[randomNum(0,_str.length)];
                _picTxt += txt;
    //获取一个随机数            ctx.fillStyle = randomColor(10,100);
    //填充随机颜色            ctx.font = randomNum(16,40)+"px SimHei";
    //设置随机数大小，字体为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(var i=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(var i=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>
    

相关推荐：html5教程

以上就是html5如何生成验证码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！