Web前端-html 5—CANVAS随机验证码_html中验证码的标签-CSDN博客

本文链接：https://blog.csdn.net/yanghainan0318/article/details/104577496
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机验证码</title>
    <style>
        #c1 {
            border: 1px solid #999;
            vertical-align: bottom;
        }

        input {
            width: 120px;
            height: 30px;
            vertical-align: bottom;
            padding: 0;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
<!--<form action="http://www.baidu.com" id="f1">-->
    <input type="text" id="inp1"/>
    <canvas id="c1" width="120" height="30">您的浏览器不支持canvas</canvas>

    <br/>
    <button>提交</button>
<!--</form>-->
<script>
    var myinput = document.querySelector("input");
    var mybutton = document.querySelector("button");
    var mycanvas = document.querySelector("canvas");
    var ctx = mycanvas.getContext("2d");
    /*
    * 分析 ：验证码
    * 1, 准备  随机数  随机色
    * 2，遮罩线（随机排布，颜色随机）
    * 3，遮罩点（随机排布  颜色随机）
    * 4，背景色随机
    * 5，绘制的文本（大小随机，内容随机，颜色随机 ，角度随机）
    *
    *辅助：
    *  1。input输入的内容要与canvas的内容校验
    *  2，点击canvas 重新绘制（刷新）
    * */


    var content = "";
    function draw() {
        content = "";
        //随机背景
        ctx.fillStyle = getRandomColor(170,250);
        ctx.fillRect(0,0,120,30);
        //遮罩线（随机排布，颜色随机）
        for(var i = 0;i<5 ;i++){
            ctx.beginPath();
            ctx.strokeStyle= getRandomColor(110,200);
            ctx.moveTo(ran(5,110),ran(5,25));
            ctx.lineTo(ran(5,110),ran(5,25));
            ctx.stroke()
        }
        // 遮罩点（随机排布  颜色随机）
        for(var i = 0;i<40 ;i++){
            ctx.beginPath();
            ctx.fillStyle = getRandomColor(100,170);
            // ctx.arc()
            ctx.fillRect(ran(0,115),ran(0,25),1.5,1.5);
        }
        // 绘制的文本（大小随机，内容随机，颜色随机 ，角度随机）
        ctx.textBaseline = "top";
        var str = "qwertyuioplmkjnhbgvfcdxszaQAZWSXEDCRFVTGBYHNUJMIKOLP1234567890";
        // var str = "qwertyuioplmkjnhbgvfcdxsza";

        for(var i = 0;i<4 ;i++){
            ctx.beginPath();
            ctx.fillStyle = getRandomColor(0,100);
            ctx.font =ran(15,40)+"px '宋体'";
            // ctx.textBaseline = "top";
            var text = str[ran(0,str.length-1)];
            content += text;
            // ctx.fillText(text,i*30,5);
            ctx.translate(i*30,0);
            var angle = Math.PI/180*ran(-20,20);
            ctx.rotate(angle);
            ctx.fillText(text,0,0);
            //还原回去
            ctx.rotate(-angle);
            ctx.translate(-i*30,0);
        }
        console.log(content);
    }
    draw();


    //点击按钮验证值
    mybutton.onclick = function () {
       // 不区分大写操作
       if( myinput.value.toLowerCase()===content.toLowerCase()){
           alert("正确")
       }else{
           alert("错误")
       //    从新刷新
           draw();
       }
    }

    //点击canvas 刷新
    mycanvas.onclick = function () {
      draw();
    }


    //定义一个随机值 有[min,max]
    function ran(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min)
    }

    // 定义随机颜色
    function getRandomColor(min,max) {
        var  R = ran(min, max);
        var  G = ran(min, max);
        var  B = ran(min, max);
        return "rgb("+R+","+G+","+B+")"
    }

    // console.log(getRandomColor(170, 220));

</script>


</body>
</html>