前端使用JS生成验证码

网站登录时输入验证码,一般会对接三方的库或后台生成,但前端难免也会遇到这种需求,以下是前端使用JS生成验证码的demo; <!DOCTYPE html> <html lang="en"> <head> &l...

网站登录时输入验证码,一般会对接三方的库或后台生成,但前端难免也会遇到这种需求,以下是前端使用JS生成验证码的demo;

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>

	<body>
		<canvas id="canvas" width="120px" height="40px"></canvas>
		<script>
			let canvas = document.getElementById('canvas');
			let context = canvas.getContext('2d');
			let numtext = '';
			draw();
			//绘制图形
			function draw() {
				numtext = '';
				//每次绘画前,清空画板
				context.clearRect(0, 0, 120, 40);
				//顶个边框
				context.strokeRect(0, 0, 120, 40);
				//设置随机数选项
				let aCode = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g'];
				//画出随机数
				for (let i = 0; i < 4; i++) {
					let x = 20 + 20 * i;
					let y = 20 + 10 * Math.random();
					let index = Math.floor(Math.random() * aCode.length);
					let txt = aCode[index];
					context.font = 'bold 20px 微软雅黑';
					context.fillStyle = getColor();
					//从此步开始,为字母旋转
					context.translate(x, y);
					let deg = Math.random() * 70 * Math.PI / 180;
					context.rotate(deg);
					context.fillText(txt, 0, 0);
					numtext+=txt;
					context.rotate(-deg);
					context.translate(-x, -y);
				}
				//设置干扰线 8条
				for (let i = 0; i < 8; i++) {
					context.beginPath();
					context.moveTo(Math.random() * 120, Math.random() * 40);
					context.lineTo(Math.random() * 120, Math.random() * 40);
					context.strokeStyle = getColor();
					context.stroke();
				}
				//设置干扰点 20 个
				for (let i = 0; i < 20; i++) {
					context.beginPath();
					let x = Math.random() * 120;
					let y = Math.random() * 40;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.strokeStyle = getColor();
					context.stroke();
				}
				console.log(numtext)
			}
			//获取随机颜色
			function getColor() {
				let r = Math.floor(Math.random() * 256);
				let g = Math.floor(Math.random() * 256);
				let b = Math.floor(Math.random() * 256);
				return `rgb(${r}, ${g}, ${b})`
			}
			//点击刷新
			canvas.onclick = function() {
				draw();
			}
		</script>
	</body>

</html>

用户输入的值与numtext这个变量对比即可

效果:

attachments-2021-06-aI03NgI160cc6d88000a8.png

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

617 篇文章

作家榜 »

  1. admin 617 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. lijian 0 文章