百万前端之js生成用户登录图形验证码

 用户登录的图形验证码，jquey生成引入图形验证码，和前端判断是否正确。

参考代码如下：

css:

.login-title{width: 20%;height: 3rem;margin: 0 auto;margin-top: 2rem;text-align: center;font-size: 22px;min-width: 300px;}
.login-form{width: 16%;height: auto;margin: 0 auto;margin-top: 2rem;font-size: 15px;min-width: 300px;}
.login-input{width: 100%;height: 2.5rem;margin-top: 1rem;border: 1px solid #aaaaaa;border-radius: 5px;padding-left: 3%;}
.login-input>input{width: 100%;height: 100%;outline: none;border: 0;background: white;border-radius: 5px;}
.login-pwd{display: flex;justify-content: space-between;}
.login-pwd>input{width: 80%;}
.login-pwd>button{width: 18%;height: 100%;border: 0;outline: none;background: #f67c00;color: white;cursor: pointer;}
#loginBtn{width: 100%;height: 2.5rem;outline: none;background: #f67c00;border: 0;border-radius: 5px;color: white;margin-top: 1rem;cursor: pointer;}
.go-register{width: 100%;height: 2.5rem;border-radius: 5px;margin-top: 1rem;border: 1px solid #f67c00;background: white;text-align: center;line-height: 2.5rem;}
.go-register>a{display: block;color:#f67c00; }
.login-code{display: flex;justify-content: space-between;}
.login-code>input{width: 70%;}
.login-code-img{width: 28%;height: 100%;cursor: pointer;}
.login-code-img>img{width: 100%;height: 100%;}

html:

<!-- 登录 -->
    <form action="" class="login-form">
        <!-- 用户名 -->
        <div class="login-username login-input">
            <input type="text" id="username" name="username" placeholder="用户名">
        </div>
        <!-- 密码 -->
        <div class="login-pwd login-input">
            <input type="password" id="password" name="password" placeholder="密码">
            <button type="button" class="login-pwd-btn" id="pwdShow">显示</button>
        </div>
        <!-- 验证码 -->
        <div class="login-code login-input">
            <input type="number" id="loginCode" name="loginCode" placeholder="验证码">
            <div class="login-code-img" id="canvasBox">
              <canvas class="show-captcha" id="canvas" style="width: 100%; height: 100%;"></canvas>
            </div>
        </div>
        <button type="submit" id="loginBtn">登录</button>
        <div class="go-register"><a href="">还没有账号？免费注册</a></div>
    </form>

js:

/**绘制验证码图片**/
function drawPic() {
    var canvas = document.getElementById("canvas");
    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 ='ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    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(90,110) +'px SimHei';
        //随机生成字体大小
        var x = 10 + i * 50;
        var y = randomNum(100, 135);
        var deg = randomNum(-30, 30);
        //修改坐标原点和旋转角度
        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();
    }
    return code;
}
/**生成一个随机数**/
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 + ")";
}

页面引入图形验证码js代码：

    //点击刷新生成的二维码
    $("#canvasBox").unbind('click').click(function(e){
        e.preventDefault();
        createCode();
    });
    //生成验证码
    function createCode(){
        VerificationCodeErrCount = 0;
        randomCode = drawPic();
        return randomCode;
    }