用html5的Canvas开发的jquery图片验证码插件推荐 亲测 原创 收藏

文章标签: 插件下载 使用实例
  • :
  • 12-02 20:03
  • :
  • 16次
  • :
  • 0条
  • 2赞

简介用jquery和html5的canvas开发的图片验证码插件,附完整的源码及使用实例l

和大家分享一个用jquery+html5 Canvas开发的图片验证码插件,插件的效果如下:

下面是完整的在线实例演示:

用html5的canvas制作的jquery验证码在线演示

如果是用requirejs来加载的话,看下面这个实例:

requirejs加载jquery.code图片验证码插件的在线演示

这款jquery图片验证码的源码如下:

(function(){
    var config={
        canvas:"canvas",		
        changeCode:"changeCode",		
        len:4	
    };	
    $.GetCode=function(option){		
        $.extend(config,option);		
        var code=drawPic();		
        $("#"+config.changeCode).on("click",function(e){			
            e.preventDefault();    		
            code=drawPic();		
        });	
    };	
    //生成一个随机数
    var randomNum=function(min,max){		
        return Math.floor(Math.random() * (max - min) + min);	
    };	
    //生成一个随机色	
    var randomColor=function (min, max) {		
        var r = randomNum(min, max);		
        var g = randomNum(min, max);		
        var b = randomNum(min, max);		
        return "rgb(" + r + "," + g + "," + b + ")";	
    };	
    //绘制验证码图片	
    var drawPic=function(){		
        var canvas = $("#"+config.canvas)[0];        
        var width = canvas.width;        
        var height = canvas.height;        
        //获取该canvas的2D绘图环境         
        var ctx = canvas.getContext('2d');         
        ctx.textBaseline ='bottom';        
        //绘制背景色        
        ctx.fillStyle = randomColor(180,240);        //颜色若太深可能导致看不清        
        ctx.fillRect(0,0,width,height);        
        //绘制文字        
        var str ='ABCEFGHJKLMNPQRSTWXY';     
        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 =1 +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();        
        }                
        $("#"+config.changeCode).data("code",code);        
        return code;	
    };		
})(jQuery);

上面的源码里,站长备注的非常清楚,希望这篇文章能帮助到所有看到这篇文章的朋友们!



您正在找的文章可能是:
热点文章
热点图文
最近更新