jquery 利用canvas做一个验证码

jquery 通过canvas做一个简单地验证码

1.今天工(xian)作(de)忙(dan)完(teng)，看到了项目正在用的一个验证码功能，一直一来是调用api接口返回的图片，突发奇想，也是练练手好久没用canvas，然后趁着前几天刚看的es6语法。几个融合到一起 写了一个小功能的验证码，效果如图:

2.分析需求

    1：生成一个带有数字，英文的验证码

    2：点击可以刷新验证码

3.思路

    1：js随机生成验证码字符串

    2：随机画上线条

    3：canvas填充到页面

4.问题总结

    1：比较懒，字符串集没有用“a,b,c~~”的方式，百度了所需要字符串的unicode码，用js动态生成了所需要的字符串。这个比较实用记录一下。

****html***

<div class="verificationCode">
    <div class="test" id="">验证码</div>
</div>

***js***                this.dataArr1 = ['48-57'];        this.dataArr2 = ['65-90','97-122'];        this.dataArr3 = ['48-57','65-90','97-122'];        //生成随机数的范围 此处this.option.type 就是动态传入的序号 可能为1,2,3 let data = ""; $.each(this["dataArr"+this.option.type],(i,v)=>{ let a = v.split("-"); for(let i = a[0]*1 ; i<=a[1]*1 ; i++){ data += String.fromCharCode(i); } }) return data;

    2：canvas的宽度和高度设置问题，写完之后也是纠结了半天。原来是两个高度要分开设置，一个是css中的宽高，一个是标签中的宽高。

5：全部代码

/*
* 随机验证码
* DOM 生成验证码存放位置
* option 配置参数
* num  验证码位数 4-6位 默认4位
* type 验证码类型 String 1 数字 2 英文 3 数字英文复合 默认1
* lineNum 干扰线条个数 默认20
* */
"use strict"
class verificationCode {
    constructor(DOM,option){
        var defaultOPtion = {
            num:4,
            type:1,
            lineNum:20
        };
        this.DOM = DOM;
        this.option = $.extend({},defaultOPtion,option);
        this.dataArr1 = ['48-57'];
        this.dataArr2 = ['65-90','97-122'];
        this.dataArr3 = ['48-57','65-90','97-122'];
        this.width = DOM.width();
        this.height = DOM.height();
        this.canvasDom = $(`<canvas id="myCanvas"  width='${this.width}' height='${this.height}'>浏览器不支持canvas，请检查</canvas>`);
    }
    init(){
        this.DOM.html(this.canvasDom[0]);
        //创建canvas对象
        this.initCanvas();
        this.clickInit();
    }
    clickInit(){
        this.DOM.click(()=>{
            this.initCanvas();
        })
    }
    initCanvas(){
        let that = this,
            ctx = that.canvasDom[0].getContext('2d');
        //改变填充颜色
        ctx.fillStyle='#ddd';
        ctx.fillRect(0,0,that.width,that.height);
        //生成干扰线条
        if(that.option.lineNum && that.option.lineNum>0){
            for(let j=0 ; j<that.option.lineNum ; j++){
                ctx.strokeStyle='#fff';
                ctx.beginPath();
                ctx.moveTo(that.randNum(that.width),that.randNum(that.height));
                ctx.lineTo(that.randNum(that.width),that.randNum(that.height));
                ctx.lineWidth=0.5;
                ctx.closePath();
                ctx.stroke();
            }
        }
        //填充文字
        ctx.fillStyle='red';
        ctx.font='bold 20px Arial';
        ctx.fillText(this.rand(),25,25);
    }
    rand(){
        //生成随机字符串
        let that = this,
            scope = that.randScope(),
            code = "";
        //根据传入的个数 生成随机数
        for(let i = 0 ; i < that.option.num ; i++){
            code += scope[that.randNum(scope.length)];
        }
        return code;
    }
    randScope(){
        //生成随机数的范围
        let data = "";
        $.each(this["dataArr"+this.option.type],(i,v)=>{
            let a = v.split("-");
            for(let i = a[0]*1 ; i<=a[1]*1 ; i++){
                data += String.fromCharCode(i);
            }
        })
        return data;
    }
    randNum(length){
        let num = parseInt(Math.random()*length)
        return num;
    }
 new verificationCode($(".test"),{type:3}).init();//生成示例