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

參考至騰訊課堂渡一教育