JQuery 图片随机数验证码




Html部分:

<a href="#" id="changeImg">
    <canvas class="show-captcha" id="canvas" width="150" height="40"></canvas>
</a>



JQuery部分:
jQuery(function($){ 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 + ")"; } var code=drawPic(); document.getElementById("changeImg").onclick = function(e) { e.preventDefault(); code=drawPic(); }
   function drawPic() { var canvas = document.getElementById("canvas"); 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); var str ='ABCEFGHJKLMNPQRSTWXY123456789';
     var code="";
    
        for(var i=1;i<=4;i++) {
            var txt = str[randomNum(0,str.length)];
            code=code+txt;
            ctx.fillStyle = randomColor(50,160);
            //随机生成字体颜色
            ctx.font = randomNum(15,40) +'px SimHei';
            var x =10 +i *25;
            var y = randomNum(25,35);
            var deg = randomNum(-45,45);
            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<3;i++) {
            ctx.strokeStyle = randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(randomNum(0,width/2), randomNum(0,height/2));
            ctx.lineTo(randomNum(0,width/2), randomNum(0,height));
            ctx.stroke();
        }
     
        for(var i=0;i <50;i++) {
            ctx.fillStyle = randomColor(255);
            ctx.beginPath();
            ctx.arc(randomNum(0, width), randomNum(0, height),1,0,2* Math.PI);
            ctx.fill();
        }
     console.log(code);  return code; } });


posted on 2020-10-26 18:37  WilliamRo  阅读(26)  评论(0)    收藏  举报