JavaScript 使用canvas绘制随机生成图形验证码

随机验证码在前端的应用非常普遍，那么使用JavaScript如何实现canvas随机验证码呢？下面来告诉你

HTML 结构准备

需要准备一个用于用户输入的输入框
一个用于显示随机生成验证码的canvas标签
一个用于提交判断值是否相等的按钮

<div class="code">
	<input type="text" value="" placeholder="请输入验证码" class="input-val">
	<canvas id="canvas" width="100" height="30"></canvas>
	<button class="btn">验证</button>
</div>

CSS 样式准备

需要为页面的元素设定样式

/* 输入框样式*/
.input-val {
	width: 150px;
	height: 30px;
	border: 1px solid #ddd;
	box-sizing: border-box;
}
/* canvas样式*/
#canvas {
	vertical-align: middle;
	/*vertical-align属性设置一个元素的垂直对齐。*/
	box-sizing: border-box;
	border: 1px solid #ddd;
	cursor: pointer;
}
/* 按钮样式*/
.btn {
	display: block;
	margin-top: 10px;
	height: 30px;
	width: 80px;
	font-size: 16px;
	color: #fff;
	background-color: #409EFE;
	border: 1px solid #EBEDEF;
	border-radius: 50px;
}

以上两步做完之后在页面上打开是这样的：

JavaScript 逻辑部分

首先做个准备：声明一个空数组用来随机生成验证码

var show_num = [];

封装一个为canvas标签渲染的函数，用来随机生成验证码

draw(show_num);// 初始调用
function draw(show_num) { //生成并渲染出验证码图形
	var canvas_width = 100;// 声明画布宽度
	var canvas_height = 30;// 声明画布高度
	var canvas = document.getElementById("canvas"); //获取canvas
	var context = canvas.getContext("2d"); //获取到canvas画图的环境
	canvas.width = canvas_width;// 画布宽度设置
	canvas.height = canvas_height;// 画布高度设置
	// 随机验证码可能的值，类型：字符串
	var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,1,2,3,4,5,6,7,8,9,0";
	var aCode = sCode.split(",");// 将验证码可能的值从字符串通过','转为数组
	var aLength = aCode.length; //获取到数组的长度
	for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数
		var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
		var deg = Math.random() - 0.5; //产生一个随机弧度
		var txt = aCode[j]; //得到随机的一个内容
		show_num[i] = txt.toLowerCase();// 将字符转为小写
		var x = 10 + i * 20; //文字在canvas上的x坐标
		var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
		context.font = "bold 24px 微软雅黑";// 字体设为粗体，大小为24px，为微软雅黑字体
		context.translate(x, y);// 设置canvas的平移
		context.rotate(deg);// 设置canvas的旋转
		context.fillStyle = randomColor();// 为canvas填充随机样式，randomColor()是自己封装的函数，用来生成随机颜色
		context.fillText(txt, 0, 0);// 填充文本
		context.rotate(-deg);
		context.translate(-x, -y);
	}

	for (var i = 0; i <= 5; i++) { //验证码上显示线条，随机生成
		context.strokeStyle = randomColor();// 随机生成颜色
		context.beginPath();
		context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.stroke();
	}
	for (var i = 0; i <= 20; i++) { //验证码上的小点，随机生成
		context.strokeStyle = randomColor(); //随机生成颜色
		context.beginPath();
		var x = Math.random() * canvas_width;
		var y = Math.random() * canvas_height;
		context.moveTo(x, y);
		context.lineTo(x + 1, y + 1);
		context.stroke();
	}
}

还需要封装一个用来生成随机颜色的函数

function randomColor() { //得到随机的颜色值，随机生成rgb颜色值
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + "," + g + "," + b + ")";// 返回生成的颜色
}

长这个样子：

获取到canvas标签为其绑定点击事件

let can = document.getElementById("canvas");
can.onclick = function() { // 为画布绑定点击事件
	draw(show_num);// 每次点击后刷新验证码
}

现在每次点击验证码就可以刷新验证码了

为按钮绑定判断点击事件

let but = document.getElementsByClassName("btn")[0];// 获取到提交按钮
but.onclick = function() {// 为按钮绑定提交事件
	let val = document.getElementsByClassName("input-val")[0].value.toLowerCase(); // 获取到输入框中的数据，并转为小写
	var num = show_num.join(""); // 获取到随机生成的验证码，并转换为字符串(原本是数组)
	if (val == '') {
		alert('请输入验证码！');
	} else if (val == num) {
		alert('提交成功！');
		document.getElementsByClassName("input-val")[0].value = ""; // 将输入框中的值置空
	} else {
		alert('验证码错误！请重新输入！');
		document.getElementsByClassName("input-val")[0].value = "";// 将输入框中的值置空
	}
}

看看效果：

canvas验证码

有不懂的欢迎评论留言讨论，如果对你有帮助，还望留下支持😊