生成随机验证码

最新推荐文章于 2023-05-28 20:01:30 发布

Lichuqiao_

最新推荐文章于 2023-05-28 20:01:30 发布

阅读量303

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Lichuqiao_/article/details/128190100

版权

<body>
    <canvas id="canvas" width="120" height="40">
        您的浏览器不支持画布
    </canvas>
    <br>
    <input type="text" id="text"><span>不区分大小写</span>
    <button id="reset">刷新</button>
    <br>
    <button id="btn_submit">提交</button>
</body>
<script>
    context.beginPath()
    //1、随机颜色：随机生成r、g、b值

        //a、定义生成随机数函数
        function rn(min,max){ //随机数函数
            return parseInt(Math.random()*(max-min)+min)
        }
        //b、随机生成r、g、b颜色值
        function rc(min,max){ //随机颜色的函数
            let r = rn(min,max);
            let g = rn(min,max);
            let b = rn(min,max);
            return `rgb(${r},${g},${b})`;
        }

    var str = ''; //在函数外部声明一个空字符串用来存储生成的随机字符，方便后面和用户的输入值对比判断
    function check(){ //把生成随机验证码的操作封装在一个函数中最后调用
        //c、设置绘制验证码的区域：矩形、浅色背景
        let w = 120;
        let h = 40;
        //context.beginPath();
        context.fillStyle = rc(180,230);
        context.fillRect(0,0,w,h) //在（0，0）位置填充一个
    
    //2、随即文本：随机生成下标，通过下标在字符串或数组中拿到对应的字符
        str='' //把上次生成的str清空
        var pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
        for(let i = 0;i < 4;i++){ //生成4个随机的字符
            let c = pool[rn(0,pool.length)] //随机的字符
            str = str + c
            let fs = rn(18,40) //字体大小
            let deg = rn(-30,30); //字体旋转角度
            context.font = fs+'px Simhei'; //设置字号、字体
            context.textBaseline = 'top' //绘制文本的基线：以上边线为界
            context.fillStyle = rc(80,150); //设置填充颜色
            context.save(); //保存前面对画笔的设置

            context.translate(30*i+15,15); //平移坐标系
            context.rotate(deg*Math.PI/180); //设置偏转角度
            context.fillText(c,-15+5,-15); //绘制文本
            context.restore(); //清除前面画笔的设置，画笔恢复到初始状态
        }
        console.log(str)
    //3、随机画线条（干扰线）：端点坐标随机生成、线条角度随机设置
        for(let i = 0;i < 5;i++){ //随机产生5条干扰线
            context.beginPath();
            context.moveTo(rn(0,w),rn(0,h)); //设置线条起点
            context.lineTo(rn(0,w),rn(0,h)); //设置线条终点
            context.strokeStyle = rc(180,230) //设置线条的随机颜色
            context.closePath(); //关闭路径
            context.stroke(); //描边
        }
    //4、随机画点：圆心坐标随机，填充颜色随机 
        for(let i = 0;i < 40;i++){
            context.beginPath();
            context.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); //随机生成圆心坐标
            context.closePath();
            context.fillStyle = rc(150,200); //随机的填充色
            context.fill() //进行填充
        }
        return str //在函数最后返回生成的随机字符
    }
    
    //5、给刷新按钮绑定事件：刷新验证码
        document.getElementById('reset').addEventListener('click',check)
    //6、将输入的值与随机生成的值判断
        document.getElementById('btn_submit').onclick = function(){
            let text = document.getElementById('text').value
            if(text.toLowerCase() == str.toLowerCase() || text.toUpperCase() == str.toUpperCase()){
                alert('验证成功');
            }
        }
    check() //在最后调用生成随机验证码的函数
</script>