JS 用画布生成验证码随机数

啊翔呀

已于 2022-06-14 18:26:22 修改

阅读量249

点赞数 1

文章标签：前端 javascript

于 2022-06-14 18:17:26 首次发布

本文链接：https://blog.csdn.net/m0_64409387/article/details/125283529

版权

这篇博客展示了如何利用JavaScript的canvas API创建验证码图片，包括两种不同的方法。第一种方法生成的数字带有随机颜色，而第二种方法生成的数字颜色相同，但代码更为简洁。文章通过代码示例详细解释了实现过程，并提供了两种方法的最终效果预览。

摘要由CSDN通过智能技术生成

先看效果图：

在这里插入图片描述
上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	</style>
	<body>
		<div>
			<input type="text">
			<button onclick="fun()">判断</button>
		</div>
		<div>
			<canvas id="myCanvas"></canvas>
		</div>

		<script>
			let data;
			let inp = document.getElementsByTagName('input')[0];
			let butt = document.getElementsByTagName('button')[0];
			let can = document.getElementById('myCanvas');

			fu()

			function fu() {
   
				
				var c = document.getElementById("myCanvas");//获取画布
				var ctx = c.getContext("2d");//实例画布
				ctx.fillStyle = "#00EE00";//画布背景色
				// 第一个随机数
				let str1 = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890';//随机数1
				let arr1 = Math.floor(Math.random() * str1.length)
				data1 = '';
				data1 += str1[arr1] + ' ';
				console.log(data1);
				var c1 = parseInt(Math.random() * 256);
				var c2 = parseInt(Math.random() * 256);
				var c3 = parseInt(Math.random() * 256);
				var rgb = "rgb(" + c1 + "," + c2 + "," + c3 + ")";
				ctx.fillRect(20