canvas实现随机验证码

canvas实现随机验证码

知识点

• canvas生成背景图和文字 设置字体样式和大小
• string的fromcharcode(code码)生成大小写字母和数字 str.tolowercase()转小写
• 随机抽取不重复的6位数字组成验证码字符串
• 效果图
  

html:

    <div class="wraper">
        <input type="text" maxlength="6" placeholder="请输入验证码,不区分大小写" class="input">
        <span class="icon"></span>
        <p class="error">验证码输入有误，请重新输入</p>
        <div class="canvas-box">
            <canvas id="mycanvas" width="200" height="50"></canvas>
            <input type="button" class="refresh">
        </div>
        <div class="btn">
            <button class="submit">提交</button>
        </div>
    </div>

css:

    * {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        width: 100%;
        height: 100%;
        background: hotpink;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .wraper {
        width: 345px;
        margin: 30px;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ccc;
        background: #fff;
    }
    
    .input {
        width: 300px;
        padding: 15px;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    
    .icon {
        float: right;
        width: 20px;
        height: 20px;
        margin-top: 13px;
        background: url('./img/yes.png') no-repeat;
        background-size: 100% 100%;
        display: none;
    }
    
    .error {
        margin-top: 10px;
        color: red;
        font-size: 12px;
        display: none;
    }
    
    .canvas-box {
        margin-top: 15px;
        position: relative;
    }
    
    #mycanvas {
        width: 300px;
        height: 60px;
    }
    
    .canvas-box .refresh {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('./img/refresh.png') no-repeat;
        background-size: 100% 100%;
        border: none;
        outline: none;
        cursor: pointer;
    }
    
    .btn {
        margin-top: 15px;
    }
    
    .btn .submit {
        width: 80px;
        height: 40px;
        border-radius: 5px;
        background: blue;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
    }

js:

    var arr = []; //筛选验证码的数组
    var value = '';
    //48-57 数字 65-90 大写字母  97-122 小写字母 
    for (var i = 48; i <= 57; i++) {
        arr.push(string.fromcharcode(i));
    }
    for (let i = 65; i <= 90; i++) {
        arr.push(string.fromcharcode(i));
    }
    for (let i = 97; i <= 122; i++) {
        arr.push(string.fromcharcode(i));
    }

    //生成随机验证码
    function getverification() {
        var codestr = '';
        var codearr = [];
        value = '';
        while (true) {
            let a = math.floor(math.random() * arr.length);
            if (codearr.indexof(a) == -1) {
                codearr.push(arr[a]);
            }
            if (codearr.length == 6) {
                break;
            }
        }
        codestr = codearr.join(' ');
        value = codearr.join('').tolowercase();
        console.log(value)
        var mycanvas = document.getelementbyid('mycanvas');
        var ctx = mycanvas.getcontext('2d');
        var img = new image();
        img.src = './img/bg_pic.jpg';
        img.onload = function() {
            var pat = ctx.createpattern(img, 'no-repeat');
            ctx.fillstyle = pat;
            ctx.fillrect(0, 0, mycanvas.width, mycanvas.height);
            ctx.textalign = 'center';
            ctx.fillstyle = '#ccc';
            ctx.font = '30px roboto slab';
            ctx.settransform(1, -0.12, 0.3, 1, 0, 12);
            ctx.filltext(codestr, mycanvas.width / 2, 35);
        }
    }
    getverification();

    //事件
    var refresh = document.getelementsbyclassname('refresh')[0];
    var submit = document.getelementsbyclassname('submit')[0];
    var inputvalue = document.getelementsbyclassname('input')[0];
    var icon = document.getelementsbyclassname('icon')[0];
    var error = document.getelementsbyclassname('error')[0];

    refresh.onclick = function() {
        getverification();
    }
    submit.onclick = function() {
        if (inputvalue.value.tolowercase() === value) {
            icon.style.display = 'inline-block';
            icon.style.background = "url('./img/yes.png') no-repeat";
            icon.style.backgroundsize = "100% 100%";
            error.style.display = 'none';
            getverification();
        } else {
            icon.style.display = 'inline-block';
            icon.style.background = "url('./img/error.png') no-repeat";
            icon.style.backgroundsize = "100% 100%";
            error.style.display = 'block';
            inputvalue.value = '';
        }
    }

参考至腾讯课堂渡一教育