jQuery+canvas随机生成彩色验证码提交代码免费下载

jQuery结合html5 canvas随机生成彩色数字英文组合验证码,不区分字母大小写,提交时判断输入验证码是否正确,点击或刷新随机换一组新的验证码。

JS代码

<script type="text/javascript"> 
    $(function(){ 
        var show_num = []; 
        draw(show_num); 
 
        $("#canvas").on('click',function(){ 
            draw(show_num); 
        }) 
        $(".btn").on('click',function(){ 
            var val = $(".input-val").val().toLowerCase(); 
            var num = show_num.join(""); 
            if(val==''){ 
                alert('请输入验证码!'); 
            }else if(val == num){ 
                alert('提交成功!'); 
                $(".input-val").val(''); 
                draw(show_num); 
 
            }else{ 
                alert('验证码错误!请重新输入!'); 
                $(".input-val").val(''); 
                draw(show_num); 
            } 
        }) 
    }) 
 
    function draw(show_num) { 
        var canvas_width=$('#canvas').width(); 
        var canvas_height=$('#canvas').height(); 
        var canvas = document.getElementById("canvas");//获取到canvas的对象,演员 
        var context = canvas.getContext("2d");//获取到canvas画图的环境,演员表演的舞台 
        canvas.width = canvas_width; 
        canvas.height = canvas_height; 
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0"; 
        var aCode = sCode.split(","); 
        var aLength = aCode.length;//获取到数组的长度 
         
        for (var i = 0; i <= 3; i++) { 
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值 
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度 
            var txt = aCode[j];//得到随机的一个内容 
            show_num[i] = txt.toLowerCase(); 
            var x = 10 + i * 20;//文字在canvas上的x坐标 
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标 
            context.font = "bold 23px 微软雅黑"; 
 
            context.translate(x, y); 
            context.rotate(deg); 
 
            context.fillStyle = randomColor(); 
            context.fillText(txt, 0, 0); 
 
            context.rotate(-deg); 
            context.translate(-x, -y); 
        } 
        for (var i = 0; i <= 5; i++) { //验证码上显示线条 
            context.strokeStyle = randomColor(); 
            context.beginPath(); 
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height); 
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height); 
            context.stroke(); 
        } 
        for (var i = 0; i <= 30; i++) { //验证码上显示小点 
            context.strokeStyle = randomColor(); 
            context.beginPath(); 
            var x = Math.random() * canvas_width; 
            var y = Math.random() * canvas_height; 
            context.moveTo(x, y); 
            context.lineTo(x + 1, y + 1); 
            context.stroke(); 
        } 
    } 
 
    function randomColor() {//得到随机的颜色值 
        var r = Math.floor(Math.random() * 256); 
        var g = Math.floor(Math.random() * 256); 
        var b = Math.floor(Math.random() * 256); 
        return "rgb(" + r + "," + g + "," + b + ")"; 
    } 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录