欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas实现随机验证码

程序员文章站 2022-06-07 15:00:24
canvas实现随机验证码 知识点 canvas生成背景图和文字 设置字体样式和大小 String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写 随机抽取不重复的6位数字组成验证码字符串 效果图 html: css: js: javascrip ......

canvas实现随机验证码

知识点

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

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

参考至腾讯课堂渡一教育