js之canvas实现验证码

let codeImg = new authCode();//创建对象
let img = codeImg.draw(document.querySelector('#canvas'));//绘制canvas
document.querySelector('#canvas').addEventListener('click',function(e){//点击事件，点击重画
	codeImg.clear();//清除验证码
	img = codeImg.draw(document.querySelector('#canvas'));//重新画
	console.log(codeImg.code);
})
function authCode(){//验证码对象
	let parms = {//基础参数
		fontSize:55,
		fontFamily:'宋体',
		lineCount:5,
		lineWeight:0.5,
		arcCount:20,
		arcR:2,
		backgroundSection:[180,255],
		colorSection:[0,150],
		fontStyle:'fill',//stroke / fill
		text:'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM0123456789',
		length:6
	}
	Object.keys(parms).forEach(k => {//挂载到对象上
		this[k] = parms[k];
	})
	authCode.prototype.draw = function(dom){//原型链的绘画函数
		if(!this.ctx){
			this.dom = dom;
			if(!this.dom){
				return
			}
			this.ctx = dom.getContext('2d');
			if(!this.ctx){
				return;
			}
		}
		// 获取背景颜色
		let colorArr = this.getColor(this.backgroundSection);
		this.ctx.fillStyle = `rgba(${colorArr[0]},${colorArr[1]},${colorArr[2]},0.8)`;
		this.ctx.fillRect(0,0,this.dom.width,this.dom.height);
		//画圆
		this.arc();
		//划线
		this.line();
		//画字
		this.font();
		this.img = this.dom.toDataURL('image/png',1);
		return this.img;
	}
	authCode.prototype.getColor = function(arr){//获取随机颜色数组
		let color = new Array(3).fill('');
		color = color.map(v => this.random(...arr));
		return color;
	}
	authCode.prototype.random = function(...arr){//获取区间内随机数
		arr.sort((a,b) => a - b);
		return Math.floor(Math.random() * (arr[0] - arr[1]) + arr[1]);
	}
	authCode.prototype.arc = function(){//画圆函数
		for(let i = 0;i < this.arcCount; i++){
			let x = Math.random() * this.dom.width,
				y = Math.random() * this.dom.height;
			this.ctx.beginPath();
			this.ctx.arc(x,y,this.arcR,0,2*Math.PI);
			this.ctx.closePath();
			
			let colorArr = this.getColor(this.colorSection);
			this.ctx.fillStyle = `rgba(${colorArr[0]},${colorArr[1]},${colorArr[2]},0.8)`;
			this.ctx.fill();
		}
	}
	authCode.prototype.line = function(){//画线函数
		for(let i = 0;i < this.lineCount; i++){
			let x = Math.random() * this.dom.width,
				y = Math.random() * this.dom.height,
				endX = Math.random() * this.dom.width,
				endY = Math.random() * this.dom.height;
			this.ctx.beginPath();
			this.ctx.lineWidth = this.lineWeight;
			this.ctx.moveTo(x,y);
			this.ctx.lineTo(endX,endY);
			this.ctx.closePath();
			let colorArr = this.getColor(this.colorSection);
			this.ctx.strokeStyle = `rgba(${colorArr[0]},${colorArr[1]},${colorArr[2]},0.8)`;
			this.ctx.stroke();
		}
	}
	authCode.prototype.getText = function(){//获取随机验证码函数
		let len = this.text.length,str = '';
		for(let i = 0;i < this.length;i++){
			str += this.text[this.random(0,this.text.length)];
		}
		return str;
	}
	authCode.prototype.font = function(){//绘制字函数
		let str = this.getText(); // 获取验证码
		this.code = str; // 利用回调函数输出文字，用于与用户输入验证码进行比对
		this.ctx.font = `${this.fontSize}px ${this.fontFamily}`;
		this.ctx.textBaseline = 'middle'; // 设置文本基线，middle是整个文字所占方框的高度的正中。
		let fontStyle = `${this.fontStyle}Text`;
		let colorStyle = `${this.fontStyle}Style`;
		for(let i = 0;i < this.length ;i++){
			let fw = this.ctx.measureText(str[i]).width; // 获取文字绘制的实际宽度
			// 获取每个字的允许范围，用来确定绘制单个文字的横坐标
			let x = this.random(this.dom.width / this.length * i, (this.dom.width / this.length) * i + fw/2);
			let deg = this.random(-6, 6);
			// 随机获取文字颜色
			let colors = this.getColor(this.colorSection);
			this.ctx[colorStyle] = `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, 0.8)`;
			this.ctx.save();
			this.ctx.rotate(deg * Math.PI / 180);
			this.ctx[fontStyle](str[i], x, this.dom.height / 2);
			this.ctx.restore();
		}
	}
	authCode.prototype.clear = function() { // 清空画布
		this.ctx.clearRect(0, 0, this.dom.width, this.dom.height);
	};
}