利用canvas制作简易的验证码

最新推荐文章于 2023-01-31 10:50:52 发布

QZN

最新推荐文章于 2023-01-31 10:50:52 发布

阅读量245

点赞数 2

分类专栏：前端文章标签： canvas 前端

本文链接：https://blog.csdn.net/u011921973/article/details/91390903

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一. 前提

制作简易验证码的前提是，要学会canvas，懂得canvas的基本使用。
不会的同学，这里推荐一个学习canvas的网址：
canvas入门基础系列 by TG_w3cschool https://www.w3cschool.cn/kqjhm/

二.实现思路

验证码，其存在的意义便是防止有人用计算机完成大量的重复性的操作（例：暴力破解密码，注册广告号等）。生成计算机识别不了或难以识别的附带信息的图片，便可以生成验证码。
验证码生成的信息图片不能唯一，我们可以建议一个“字符信息数组”

//字符信息数组
let array = new Array('0','1','2','3','4','5','6','7','8','9',
					'A','B','C','D','E','F','G','H','I','J','K',
					'L','M','N','O','P','Q','R', 'S','T','U','V',
					'W','X','Y','Z');

利用随机数取数组下边来取出相应的字符信息，并记录起来，一般只需要取出并记录4个字符信息。为了使验证码更难识别，我们可以使字符产生一定的倾斜（不要超出界太多）

let array = new Array('0','1','2','3','4','5','6','7','8','9',
					'A','B','C','D','E','F','G','H','I','J','K',
					'L','M','N','O','P','Q','R', 'S','T','U','V',
					'W','X','Y','Z');
if(canvas.getContext){
    //创建画笔
	let cxt = canvas.getContext("2d");
	//用于记录验证码
	let code = "";
	//文字样式
	cxt.font = "normal lighter 110px Arial";
	for (let i = 0; i < 4; i++) {
		//产生随机数
		let index = Math.floor(Math.random() * 36);
		//保存之前的样式
		cxt.save();
		//每次偏离一定的距离画字符,避免画在同一处
		cxt.translate(10 + i * 60, 110);
		//利用随机数让字符随机倾斜
		cxt.rotate(Math.PI / (Math.random() < 0.5 ? Math.random() * -10 - 13 : Math.random() * 4 + 4));
		//画上字符
		cxt.fillText(array[index], 0, 0, 60);
		//回到之前的样式
		cxt.restore();
		//记录验证码
		code += array[index];
	}
}

成功画出验证码后，我们可以将这段代码写成函数形式，参数传画笔，返回值为验证码字符串

function createCode(cxt){
	//字符信息数组
	let array = new Array('0','1','2','3','4','5','6','7','8','9',
						'A','B','C','D','E','F','G','H','I','J','K',
						'L','M','N','O','P','Q','R', 'S','T','U','V',
						'W','X','Y','Z');
	//绘制验证码
	//清空画布
	cxt.clearRect(0,0,300,150);
	//文字样式
	cxt.font = "normal lighter 110px Arial";
	let code = "";
	//将4个随机的字符画上画布
	for (let i = 0; i < 4; i++) {
		//产生随机数
		let index = Math.floor(Math.random() * 36);
		//保存之前的样式
		cxt.save();
		//每次偏离一定的距离画字符,避免画在同一处
		cxt.translate(10 + i * 60, 110);
		//利用随机数让字符随机倾斜
		cxt.rotate(Math.PI / (Math.random() < 0.5 ? Math.random() * -10 - 13 : Math.random() * 4 + 4));
		//画上字符
		cxt.fillText(array[index], 0, 0, 60);
		//回到之前的样式
		cxt.restore();
		//记录验证码
		code += array[index];
	}
	//返回验证码字符串
	return code;
}

在这里，我只是提出了canvas制作简易的验证码的大体思路。顺着这个思路，还可以对此函数进行改进，使其更加完美。画验证码的步骤，不局限于将字符倾斜，各位可以自行添加一些“障眼”的东西（例如：贯穿的线条，背景的颜色等)。

简单实现验证码的一个HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证码</title>
		<style type="text/css">
			button{
				width: 300px;
				height: 30px;
				cursor: pointer;
			}
			canvas{
				border: 1px solid #D3D3D3;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				let canvas = document.getElementsByTagName("canvas")[0];
				let refresh = document.getElementsByTagName("button")[0];
				if(canvas.getContext){
					//创建画笔
					let cxt = canvas.getContext("2d");
					//将画笔作为参传入,返回值为验证码字符串
					let code = createCode(cxt);
					console.log("验证码值为："+code);
					//设置刷新按钮点击事件
					refresh.onclick = ()=>{
						code = createCode(cxt);
						console.log("验证码值为："+code);
					}
				}	
			}
			//绘制验证码,并返回验证码值
			function createCode(cxt){
				//字符信息数组
				let array = new Array('0','1','2','3','4','5','6','7','8','9',
									'A','B','C','D','E','F','G','H','I','J','K',
									'L','M','N','O','P','Q','R', 'S','T','U','V',
									'W','X','Y','Z');
				//绘制验证码
				//清空画布
				cxt.clearRect(0,0,300,150);
				//文字样式
				cxt.font = "normal lighter 110px Arial";
				let code = "";
				//将4个随机的字符画上画布
				for (let i = 0; i < 4; i++) {
					//产生随机数
					let index = Math.floor(Math.random() * 36);
					//保存之前的样式
					cxt.save();
					//每次偏离一定的距离画字符,避免画在同一处
					cxt.translate(10 + i * 60, 110);
					//利用随机数让字符随机倾斜
					cxt.rotate(Math.PI / (Math.random() < 0.5 ? Math.random() * -10 - 13 : Math.random() * 4 + 4));
					//画上字符
					cxt.fillText(array[index], 0, 0, 60);
					//回到之前的样式
					cxt.restore();
					//记录验证码
					code += array[index];
				}
				//返回验证码字符串
				return code;
			}
		</script>
	</head>
	<body>
		<button type="button">刷新</button>
		<br/>
		<canvas  width="300px" height="150px"></canvas>
	</body>
</html>

最后提一下：
这是作者第一次写博客，有不足之处，望各位提醒！