h5图形验证码

最新推荐文章于 2025-06-06 15:50:19 发布

原创最新推荐文章于 2025-06-06 15:50:19 发布 · 1.0k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html

日常小方法专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas绘制随机验证码的方法。通过随机生成背景色、字体颜色和大小，以及使用旋转和平移等变换来增强验证码的安全性和美观性。此外，还包含了绘制干扰线和干扰点的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

drawPic();
		/**生成一个随机色**/
		function randomColor(min, max) {
			var r = randomNum(min, max);
			var g = randomNum(min, max);
			var b = randomNum(min, max);
			return "rgb(" + r + "," + g + "," + b + ")";
		}

		/**绘制验证码图片**/
		function drawPic() {
			var canvas = document.getElementById('tutorial');
			var ctx = '';
			if (canvas.getContext) {
				ctx = canvas.getContext('2d');
			}
			/**绘制背景色**/
			ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
			ctx.fillRect(0, 0, 90, 28)
			/**绘制文字**/
			var arr;
			var text = '';
			var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
			for (var i = 0; i < 4; i++) {
				var txt = str[randomNum(0, str.length)];
				ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
				ctx.font = randomNum(20, 26) + 'px SimHei'; //随机生成字体大小
				var x = 5 + i * 20;
				var y = randomNum(20, 25);
				var deg = randomNum(-20, 20);
				//修改坐标原点和旋转角度
				ctx.translate(x, y);
				ctx.rotate(deg * Math.PI / 180);
				ctx.fillText(txt, 5, 0);
				text = text + txt;
				//恢复坐标原点和旋转角度
				ctx.rotate(-deg * Math.PI / 180);
				ctx.translate(-x, -y);
			}
			/**绘制干扰线**/
			for (var i = 0; i < 4; i++) {
				ctx.strokeStyle = randomColor(40, 180);
				ctx.beginPath();
				ctx.moveTo(randomNum(0, 90), randomNum(0, 28));
				ctx.lineTo(randomNum(0, 90), randomNum(0, 28));
				ctx.stroke();
			}
			/**绘制干扰点**/
			for (var i = 0; i < 20; i++) {
				ctx.fillStyle = randomColor(0, 255);
				ctx.beginPath();
				ctx.arc(randomNum(0, 90), randomNum(0, 28), 1, 0, 2 * Math.PI);
				ctx.fill();
			}
			console.log(text);//验证码值
		}