js制作随机四位数验证码图片

html 复制代码

<div class="lable lable2">
				<div class="l"><span>*</span>验证码</div>
				<div class="r">
					<input type="number" name="vercode"  placeholder="请输入验证码">
				</div>
				<div class="verCode_div" style="margin-left: 5px;">
					<canvas id="digitCanvas" width="120" height="40"></canvas>
				</div>
				<a href="javascript:;" class="chang_verCode_img" id="de_chang_verCodeImg"
					style="font-size: 12px;">换一张</a>
</div>

通过canvas绘制，并在图片中设置随机圆点、横线；

javascript 复制代码

var imgcode;
getimgcode();
function generateRandomNumber() {
			imgcode = Math.floor(1000 + Math.random() * 9000);
		}
		function getimgcode() {
			const canvas = document.getElementById('digitCanvas');
			const ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			let numToShow = imgcode; // 要显示的数字
			const fontSize = 30;
			const animationDuration = 100; // 动画持续时间(ms)
			const dotCount = 20; // 点的数量
			const lineCount = 2; // 线的数量
			// 设置字体样式
			ctx.font = `bold ${fontSize}px Arial`;
			// 获取数字的边界框，以便居中显示
			const numWidth = ctx.measureText(numToShow).width;
			const centerX = canvas.width / 2;
			const centerY = canvas.height / 2;
			// 渐显动画
			function fadeinText(text, x, y, duration) {
				return new Promise(resolve => {
					// 在开始绘制之前清空画布
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					ctx.fillStyle = 'black'; // 设置文本颜色为黑色
					let startOpacity = 0;
					const step = 1 / (duration / 16.67); // 基于每帧约16.67ms计算步长
					function animate(currentTime) {
						if (startOpacity >= 1) {
							resolve();
							return;
						}
						ctx.globalAlpha = startOpacity;
						ctx.fillText(text, x, y);
						startOpacity += step;
						requestAnimationFrame(animate);
					}
					requestAnimationFrame(animate);
				});
			}
			// 绘制随机点
			function drawRandomDots(count) {
				for (let i = 0; i < count; i++) {
					const x = Math.random() * canvas.width;
					const y = Math.random() * canvas.height;
					const radius = Math.random() * 3 + 1;
					ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
					ctx.beginPath();
					ctx.arc(x, y, radius, 0, Math.PI * 2);
					ctx.fill();
				}
			}
			// 绘制随机线条
			function drawRandomLines(count) {
				for (let i = 0; i < count; i++) {
					ctx.beginPath();
					ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
					ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
					ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
					ctx.lineWidth = Math.random() * 3 + 1;
					ctx.stroke();
				}
			}
			// 主程序
			async function startAnimation() {
				await fadeinText(numToShow, centerX - numWidth / 2, centerY + fontSize / 2, animationDuration);
				drawRandomDots(dotCount);
				drawRandomLines(lineCount);
			}
			// 启动动画
			startAnimation();
		}

手动获取随机数，可以在输入时自己进行校验；