canvas实现验证码登录框

demo图片

一步步实现，结构 ----> 样式 ----> 交互功能

html 结构

    <div class="wrapper">
        <div class="inputBox">
            <input type="text" placeholder="请输入验证码">
        </div>
        <p class="error"></p>
        <div class="canvasBox">
            <div class="imgBox">
                <canvas id="myCanvas" width=300 height=80></canvas>
            </div>
            <input type="button" class="refresh">
        </div>
        <button class="submit">submit</button>
    </div>

【仅 html】

---

css 样式

*{
    margin:0;
    padding:0;
}
.wrapper{
    margin:30px;
    width:345px;
    padding:15px;
    border:1px solid #ccc;
    border-radius: 5px;
}
.inputBox{
    position: relative;
}
/* 鼠标聚焦时输入框变色 */
.inputBox input:focus {
    border-style:solid;  
    border-color: #03a9f4;  
    box-shadow: 0 0 5px #03a9f4; 
    }

.inputBox input{
    display: inline-block;
    width: 300px;
    outline: none;
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
.inputBox span{
    position: absolute;
    width: 32px;
    height: 32px;
    background:url('./images/error.png');
    background-size:100%;
    display:none;
}
.error{
    color:red;
    margin-top:10px;
    font-size:12px;
    display:none;
}
.canvasBox{
    position: relative;
    margin-top: 15px;
    /* border:1px solid #000; */
}
.canvasBox .imgBox{
    width: 300px;
    height: 80px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.canvasBox .refresh{
    position: absolute;
    right:0;
    top:50%;
    display:inline-block;
    width: 32px;
    height: 32px;
    background:url('./images/refresh.png');
    background-size: 100%;
    margin-top: -16px;
    border: 0;
}
.submit{
    position:relative;
    left:90px;
    padding: 8px;
    border:0;
    background-color:#367CF1;
    color:#fff;
    font-size: 15px;
    margin-top:15px;
    border-radius: 5px;
    cursor:pointer;
} 

【引入 css】

---

js部分

【分析基本功能】
1. 进入页面，图片验证码已经生成。调用createCanvas() 方法来生成验证码。
2. 函数createCanvas() 生成验证码。函数功能应有：创建画布，画布背景，随机生成的六位数验证码（由数字和大小写英文字母组成的字符串）填充到画布。
3. 验证码点击刷新。
4. 填写验证码。点击提交 --> 进行判断 --> 正确 / 错误
5. 验证码错误。在提交框的右边出现❌，出现错误提示“验证码错误，请重新输入”，并刷新验证码。
6. 验证码正确。在提交框的右边出现 √ ，并刷新验证码。

// 验证码可从 arr[] 挑六位组成
var arr = [0,1,2,3,4,5,6,7,8,9]
for(var i = 65; i < 122; i++){
    if(i > 90 && i < 97)
        continue;
    arr.push(String.fromCharCode(i));
}

var value;
function createCanvas(){
    //选取要显示的字符，生成验证码区域
    var canvasStr = ''; //将要画到画布上的验证码
    value = '';
    for(var i = 0; i < 6; i++){
        var a = arr[Math.floor(Math.random() * arr.length)];
        canvasStr += a + ' ';
        value += a;
    }
    
    var myCanvas = document.getElementById('myCanvas');
    var ctx = myCanvas.getContext('2d');
    var oImg = new Image();
    oImg.src = './images/bg.png';
    oImg.onload = function(){

        //背景绘制
        var pattern = ctx.createPattern(oImg,'repeat');
        ctx.fillStyle = pattern;
        ctx.fillRect(0,0,myCanvas.width,myCanvas.height);

        //文字绘制
        ctx.textAlign = 'center';
        ctx.fillStyle = '#ccc';
        ctx.font = '46px Roboto Slab';
        ctx.setTransform(1,-0.12,0.3,1,0,12);
        ctx.fillText(canvasStr,myCanvas.width/2,60);
    }
}
createCanvas();

//提交
$('.submit').on('click',function(){
    showResult();
});

$('.refresh').on('click',function(){
    createCanvas();
})

//验证码判断
function showResult(){
    var inputValue = $('.inputBox input').val();
    console.log(inputValue);
    if(inputValue == value){
        $('.inputBox span').css({
            background:'url("./images/true.png")',
            display: 'inline-block'
        })
        $('.error').css('display','none');
        createCanvas();
    }else{
        $('.inputBox span').css({
            background:'url("./images/false.png")',
            display: 'inline-block'
        });
        $('.error').css('display','block').html('验证码错误，请重新输入');
        createCanvas();
    }
}