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 = '';

        }

    }

参考至腾讯课堂渡一教育