canvas绘制验证码示例

最新推荐文章于 2022-07-03 11:07:08 发布

耗子ai吃鱼

最新推荐文章于 2022-07-03 11:07:08 发布

阅读量225

点赞数

分类专栏： canvas

原文链接：https://blog.csdn.net/qq_38944959/article/details/88858119

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原作者地址
理论基础：
掌握使用canvas绘制线条和圆形以及绘制文字

实现思路：
先构建一个画布，设置一定的宽高（在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，再定义一个随机字符，获取随机的索引值，即可生成随机的验证码。需要刷新，直接把以下代码封装在函数里，用一个事件触发即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="code" width="80" height="30" style="border: 1px solid #00F7DE;"></canvas>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			let canvasW = $("#code").width()
			let canvasH = $("#code").height()
			
			/**
			 * 获取任意区间的随机数字
			 * */
			let getNumRandom = function (Num) {
				return Math.floor(Math.random()*Num) 
			}
			 // var getRandom=function (maxNum) {
			 //        return Math.floor(Math.random()*maxNum);
			 //    }
			
			/**
			  * 获取随机颜色rgba
			  * */
			let getColorRandom = function () {
				let r = getNumRandom(256),
					g = getNumRandom(256),
					b = getNumRandom(256),
					a = getNumRandom(256)
					return `rgba(${r}, ${g}, ${b}, ${a})`
			}
			
			// 开始绘图
			let ctx = $("#code")[0].getContext("2d")
			let lineNum = 3, arcNum = 20
			
			// 绘制随机线
			for(let i = 0; i<lineNum; i++) {
				ctx.beginPath()  // 重新开始新路径
				ctx.moveTo(getNumRandom(canvasW), getNumRandom(canvasH))  // 起点
				ctx.lineTo(getNumRandom(canvasW), getNumRandom(canvasH))  // 到哪
				ctx.strokeStyle = getColorRandom()  // 设置或返回用于笔触的颜色、渐变或模式
				ctx.closePath()  // 闭合路径
				ctx.stroke()  // 绘制已定义的路径
			}
			
			// 绘制随机点
			for(let i = 0; i<arcNum; i++) {
				ctx.beginPath()  // 重新开始路径
				/**
				 * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
				 * x: 圆的中心的 x 坐标
				 * y: 圆的中心的 y 坐标
				 * r: 圆的半径
				 * eAngle: 结束角，以弧度计
				 * sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）
				 * counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针
				 * **/
				ctx.arc(getNumRandom(canvasW), getNumRandom(canvasH), 1, 0, 2*Math.PI) 
				ctx.fillStyle = getColorRandom()  // 设置或返回用于填充绘画的颜色、渐变或模式
				ctx.closePath()  //闭合路径
				ctx.fill()  // 填充当前绘制路径
			}
			
			// 绘制随机验证码
			let codeText = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
			for(let i = 0; i<4; i++) {
				// 随机字母数字
				let txt = codeText.split("")[getNumRandom(codeText.length)]
				// 绘制
				ctx.beginPath()
				ctx.font = "23px 微软雅黑"
				ctx.fillStyle = getColorRandom()
				/**
				 * context.fillText(text,x,y,maxWidth);
				 * text: 规定在画布上输出的文本
				 * x: 开始绘制文本的 x 坐标位置（相对于画布）
				 * y: 开始绘制文本的 y 坐标位置（相对于画布）
				 * */
				ctx.fillText(txt, 20*i, 25)  // 在画布上绘制“被填充的”文本
				ctx.closePath()
			}
		</script>
	</body>
</html>

在这里插入图片描述

耗子ai吃鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制验证码示例

理论基础：掌握使用canvas绘制线条和圆形以及绘制文字实现思路：先构建一个画布，设置一定的宽高（在canvas中设置宽高和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，再定义一个随机字符，获取随机的索引值，即可生成随机的验证码。需要刷新，直接把以下代码封装在函数里，用一个事件触发即可。————————————————
复制链接

扫一扫