首页 > 其他分享 >Canvas生成随机验证码

Canvas生成随机验证码

时间:2022-12-31 15:34:50浏览次数:41  
标签:Canvas str setFillStyle 验证码 randomNum let 随机 context

// 获取动态图片验证码
getImgCode() {
	let context = uni.createCanvasContext('imgcanvas', this),
		w = 72,
		h = 36;
	context.setFillStyle("white");
	context.setLineWidth(5);
	context.fillRect(0, 0, w, h);
	// 去除不易分辨的l,I
	let letterStr = "a,b,c,d,e,f,g,h,i,j,k,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
	let pool = letterStr.split(','),
		str = '';
	for (let i = 0; i < 4; i++) {
		let c = pool[this.randomNum(0, pool.length - 1)];
		let deg = this.randomNum(-30, 30);
		context.setFontSize(18);
		context.setTextBaseline("top");
		context.setFillStyle(this.randomColor(80, 150));
		context.save();
		context.translate(30 * i + 15, parseInt(h / 1.5));
		context.rotate(deg * Math.PI / 180);
		context.fillText(c, -15 + 5, -15);
		context.restore();
		str += c;
	}
	console.log('随机验证码', str)
	this.verCode = str;
	for (let i = 0; i < 40; i++) {
		context.beginPath();
		context.arc(this.randomNum(0, w), this.randomNum(0, h), 1, 0, 2 * Math.PI);
		context.closePath();
		context.setFillStyle(this.randomColor(150, 200));
		context.fill();
	}
	context.draw();
},

标签:Canvas,str,setFillStyle,验证码,randomNum,let,随机,context
From: https://www.cnblogs.com/huangtq/p/17016724.html

相关文章