【css+js+canvas】canvas的验证码生成

来源：互联网发布：知乎比较有趣的话题编辑：程序博客网时间：2024/05/29 18:05
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <canvas id="canvas" width="150" height="50"></canvas><script>    function randomNum(min,max){        return Math.floor(Math.random()*(max-min)+min);    }    function randomColor(min,max){        var _r = randomNum(min,max);        var _g = randomNum(min,max);        var _b = randomNum(min,max);        return "rgb("+_r+","+_g+","+_b+")";    }    document.getElementById("canvas").onclick = function(e){        e.preventDefault();        drawPic();    };    function drawPic(){        var $canvas = document.getElementById("canvas");        var _str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";        var _picTxt = "";        var _num = 6;        var _width = $canvas.width;        var _height = $canvas.height;        var ctx = $canvas.getContext("2d");        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); /*y轴位置*/            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";            ctx.translate(x,y);            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();            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.bcty365.com/content-151-250-1.html#
阅读全文
'); })();