canvas 验证码

canvas做的一个验证码

function getvtfCode(obj) {
            //     obj参数对象
            // {
            //     id:""//承载验证码canvas的容器id（必传）;
            //     isNum:true//验证码是否包含数字（非必传，默认true）;
            //     isEng:false//验证码是否包含字母（非必传，默认false）;
            //     isUpLow:false//验证码是否区分大小写（非必传，默认false）;
            //     leng:6//验证码长度（非必传，默认6）;
            // }

            // 获取元素宽高；
            this.w = document.getElementById(obj.id).clientWidth;
            this.h = document.getElementById(obj.id).clientHeight;
            //初始化canvas；
            this.canvas = document.createElement("canvas");
            this.canvas.setAttribute("id", "verificationCodeCanvas");
            this.canvas.width = this.w;
            this.canvas.height = this.h;
            this.canvas.style.border = `1px solid ${this.getColor()}`;
            document.getElementById(obj.id).append(this.canvas);
            this.ctx = this.canvas.getContext("2d");
            // 绑定点击更换验证码事件；
            this.canvas.onclick = () => {
                this.ctx.clearRect(0, 0, this.w, this.h);
                this.drow(obj);
            }
            this.drow(obj);
        }
        getvtfCode.prototype.drow = function (obj) {
            // 渲染直线干扰线8条；
            for (let i = 0; i < 8; i++) {
                this.ctx.beginPath();
                this.ctx.moveTo(Math.random() * this.w, Math.random() * this.h);
                this.ctx.lineTo(Math.random() * this.w, Math.random() * this.h);
                this.ctx.strokeStyle = this.getColor();
                this.ctx.lineWidth = Math.random() * 2;
                this.ctx.stroke();
            }
            // 渲染圆点干扰点20个；
            for (let y = 0; y < 20; y++) {
                this.ctx.beginPath();
                this.ctx.arc(Math.random() * this.w, Math.random() * this.w, 2, 0, 2 * Math.PI);
                this.ctx.fillStyle = this.getColor();
                this.ctx.fill();
            }

            //处理验证码
            this.codeText = "";//验证码；
            let codeList = [];//验证码集合；
            let numList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
            let engList = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
            let NandEList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
            // 根据条件生成验证码集合；
            let leng = obj.leng ? obj.leng : 6
            for (let z = 0; z < leng; z++) {
                if (obj.isNum && obj.isEng) {
                    codeList[z] = NandEList[parseInt(Math.random() * NandEList.length)];
                } else if (!obj.isNum && obj.isEng) {
                    codeList[z] = engList[parseInt(Math.random() * engList.length)];
                } else {
                    codeList[z] = numList[parseInt(Math.random() * numList.length)];
                }
                // 为英文随机改变大写
                let uplow = Math.round(Math.random());
                if (uplow) {
                    codeList[z] = codeList[z].toLocaleUpperCase();
                    this.codeText += codeList[z]
                } else {
                    this.codeText += codeList[z]
                }
                //渲染验证码
                this.ctx.font = "bold 25px Arial";
                this.ctx.textAlign = "center";
                this.ctx.fillStyle = this.getColor("1");
                let fontW = this.canvas.width / leng
                this.ctx.fillText(codeList[z], fontW * z + fontW/2, 20 + (this.canvas.height - 20) * Math.random());
            }
            // 不区分大小写处理，均为小写
            if (!obj.isUpLow) {
                this.codeText = this.codeText.toLocaleLowerCase();
            }
        }
        // 获取随机颜色
        getvtfCode.prototype.getColor = function (num) {
            let r = Math.round(Math.random() * 255);
            let g = Math.round(Math.random() * 255);
            let b = Math.round(Math.random() * 255);
            let a = num ? num : Math.random();
            return `rgba(${r},${g},${b},${a})`
        }
        // 获取验证码
        getvtfCode.prototype.getCode = function () {
            return this.codeText
        }

api

先创建容器DOM，给容器增加宽高。使用时调用构造函数 new getvtfCode(option)。

let vtyCode = new getvtfCode({ id: "verifyCode"});

option具体参数如下
{
id:""//承载验证码canvas的容器id（必传）;
isNum:true//验证码是否包含数字（非必传，默认true）;
isEng:false//验证码是否包含字母（非必传，默认false）;
isUpLow:false//验证码是否区分大小写（非必传，默认false）;
leng:6//验证码长度（非必传，默认6）;
}

        let vtyCode = new getvtfCode({
            id: "verifyCode",
            isEng: false,
            isNum: true,
            isUpLow: true,
            leng: 6
        });

获取验证码时调用getCode()

        vtyCode.getCode();

PS:欢迎大家指正补充。