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:欢迎大家指正补充。