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***

class="verificationCode">
    
class="test" id="">验证码

***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，请检查`);
    }
    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{
            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();//生成示例