用HTML5生成验证码的思路和代码是什么

思路介绍：

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

高级方法：

利用表单插件属性绑定验证码数据(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>