Html5生成验证码

来源：互联网发布：美工设计招聘编辑：程序博客网时间：2024/06/03 05:04

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>

参考:
http://www.qdfuns.com/notes/31796/7045dd1d8b39c7d09ba0817e02e3aad9.html

阅读全文

0 0