JS生成用户登录图形验证码

生成用户登录图形验证码的过程可以通过几个步骤来实现，包括创建画布，生成随机验证码文本，将验证码文本绘制到画布上，以及添加一些噪点和线条来增加复杂性。

HTML

首先，在HTML文件中创建一个<canvas>元素和一个按钮来触发验证码的生成：

<body>
		<div class="code">
			<!-- 用户名输入框 -->
			用户名:<input type="text"><br>
			<!-- 密码输入框 -->
			密&nbsp;&nbsp;&nbsp;码:<input type="text"><br>
			<!-- 验证码输入框 -->
			验证码:<input type="text" value="" id="inputValue" placeholder="请输入验证码（不区分大小写）">
			<!-- canvas画布框 -->
			<canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas>
			<br>
			<!-- 登录按钮 -->
			<button id="btn">登录</button>
		</div>
	</body>

 

JavaScript

然后，引入jQuery

<script src="./js/jquery-3.7.1.js"></script>

 创建一个函数来把随机验证码放到画布上

// 封装一个把随机验证码放在画布上
			function draw(showNum) {}

然后获取canvas的相关信息

// 获取canvas
				var canvas = $("#c1")
// 获取一个 <canvas> 元素的2D渲染上下文
				var ctx = canvas[0].getContext("2d")

const ctx = canvas.getContext('2d'); 这行代码的作用是获取一个HTML5 <canvas> 元素的2D渲染上下文。一旦你有了这个上下文，你就可以使用各种绘图方法来绘制形状、路径、文本、图像等内容到 <canvas> 元素上。

接着获取画布的宽度

var canvas_width = canvas.width()
				var canvas_height = canvas.height()

清空之前的内容，从0，0开始绘制，设置矩形宽高

ctx.clearRect(0, 0, canvas_width, canvas_height)

ctx.clearRect(0, 0, canvas_width, canvas_height) 是用来清空画布的。在 Canvas 绘图上下文中，这行代码将清除整个画布，也就是说，画布上的所有内容都将被删除。

这个方法的参数是左上角的 x 坐标，左上角的 y 坐标，宽度和高度。在这里，(0, 0) 是起始位置（即左上角），canvas_width 和 canvas_height 分别是画布的宽度和高度。因此，这个方法将清除整个画布。

在绘图或动画之前，通常会先调用这个方法来清空画布，以便从头开始绘制

开始绘制

声明一个变量为a-z小写字母，A-Z大写字母，1-9的数字的字符串

var scode =
					"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,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,1,2,3,4,5,6,7,8,9,"

 接着，使用 split(",") 方法将这个字符串按照逗号分隔成一个数组，并将结果赋值给 arrCode。

 同时声明一个变量等于这个数组的长度

var arrCode = scode.split(",")
				var arrLength = arrCode.length

使用 Math.random() 和 Math.floor() 从 arrCode 数组中随机选择一个索引。

var index = Math.floor(Math.random() * arrCode.length)

随机一个字符

var txt = arrCode[index] //随机一个字符

将字符转化为小写存入验证码数组

showNum[i] = txt.toLowerCase() //转化为小写存入验证码数组

开始控制字符绘制位置

// 开始控制字符的绘制位置
					var x = 10 + 20 * i //每一个验证码绘制的起始点x坐标
					var y = 20 + Math.random() * 8 // 起始点y坐标

					ctx.font = "bold 20px 微软雅黑"

旋转字符

// 开始旋转字符
					var deg = Math.random * -0.5

倾斜字符

// canvas 要实现绘制内容具有倾斜的效果，必须先平移，目的是把旋转点移动到绘制内容的地方
					ctx.translate(x, y)
					ctx.rotate(deg)

设置随机颜色

// 设置绘制的随机颜色
					ctx.fillStyle = randomColor()
					ctx.fillText(txt, 0, 0)

还原canvas

// 把canvas复原
					ctx.rotate(-deg)
					ctx.translate(-x, -y)

开始一个新的路径

// 循环判断i小于30
				for (var i = 0; i < 30; i++) {
					// 如果i小于5
					if (i < 5) {
						// 绘制线
						ctx.strokeStyle = randomColor()
						// 开始路径
						ctx.beginPath()
						// 在 Canvas 绘图上下文中将当前路径的起始点移动到画布上的一个随机位置。
						ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
						// 在 Canvas 绘图上下文中从当前路径的最后一个点绘制一条直线到一个新的随机位置。
						ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
						// 绘制路径
						ctx.stroke()
					}
					// 绘制点
					ctx.strokeStyle = randomColor()
					ctx.beginPath()
					var x = Math.random() * canvas_width
					var y = Math.random() * canvas_height
					ctx.moveTo(x, y)
					ctx.lineTo(x + 1, y + 1)
					ctx.stroke()

				}

随机一个颜色

// 随机颜色生成一个随机的 RGB 颜色值
			function randomColor() {
				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})`

			}

 然后调用这个封装的函数

$(function() {
			// 存放随机的验证码
			var showNum = []

			draw(showNum)

			$("#c1").click(function() {
				draw(showNum)
			})
			$("#btn").click(function() {
				var s = $("#inputValue").val().toLowerCase()
				var s1 = showNum.join("")
				if (s == s1) {
					alert("提交成功")
				} else {
					alert("验证码错误")
				}
				draw(showNum)
			})

整体部分：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="./js/jquery-3.7.1.js"></script>
		<title>Document</title>

		<style>
			input {
				width: 200px;
				height: 32px;
				border: 1px solid #000;
				box-sizing: border-box;
				margin-top: 2px;
			}

			#c1 {
				vertical-align: middle;
				box-sizing: border-box;
				cursor: pointer;
			}

			#btn {
				display: block;
				margin-top: 20px;
				height: 32px;
				font-size: 16px;

			}
		</style>
	</head>
	<body>
		<div class="code">
			<!-- 用户名输入框 -->
			用户名:<input type="text"><br>
			<!-- 密码输入框 -->
			密&nbsp;&nbsp;&nbsp;码:<input type="text"><br>
			<!-- 验证码输入框 -->
			验证码:<input type="text" value="" id="inputValue" placeholder="请输入验证码（不区分大小写）">
			<!-- canvas画布框 -->
			<canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas>
			<br>
			<!-- 登录按钮 -->
			<button id="btn">登录</button>
		</div>
	</body>
	<script>
		$(function() {
			// 存放随机的验证码
			var showNum = []

			draw(showNum)

			$("#c1").click(function() {
				draw(showNum)
			})
			$("#btn").click(function() {
				var s = $("#inputValue").val().toLowerCase()
				var s1 = showNum.join("")
				if (s == s1) {
					alert("提交成功")
				} else {
					alert("验证码错误")
				}
				draw(showNum)
			})


			// 封装一个把随机验证码放在画布上
			function draw(showNum) {
				// 获取canvas
				var canvas = $("#c1")
				// 获取一个 <canvas> 元素的2D渲染上下文
				var ctx = canvas[0].getContext("2d")
				// 获取画布的宽高
				var canvas_width = canvas.width()
				var canvas_height = canvas.height()
				//  清空之前绘制的内容
				// 0,0清空的起始坐标
				// 矩形的宽高
				ctx.clearRect(0, 0, canvas_width, canvas_height)
				// 开始绘制
				var scode =
					"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,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,1,2,3,4,5,6,7,8,9,"
				var arrCode = scode.split(",")
				var arrLength = arrCode.length
				//循环判断i是否小于4
				for (var i = 0; i < 4; i++) {
					// 使用 Math.random() 和 Math.floor() 从 arrCode 数组中随机选择一个索引。
					var index = Math.floor(Math.random() * arrCode.length)
					var txt = arrCode[index] //随机一个字符
					showNum[i] = txt.toLowerCase() //转化为小写存入验证码数组
					// 开始控制字符的绘制位置
					var x = 10 + 20 * i //每一个验证码绘制的起始点x坐标
					var y = 20 + Math.random() * 8 // 起始点y坐标

					ctx.font = "bold 20px 微软雅黑"
					// 开始旋转字符
					var deg = Math.random * -0.5
					// canvas 要实现绘制内容具有倾斜的效果，必须先平移，目的是把旋转点移动到绘制内容的地方
					ctx.translate(x, y)
					ctx.rotate(deg)
					// 设置绘制的随机颜色
					ctx.fillStyle = randomColor()
					ctx.fillText(txt, 0, 0)

					// 把canvas复原
					ctx.rotate(-deg)
					ctx.translate(-x, -y)

				}
				// 循环判断i小于30
				for (var i = 0; i < 30; i++) {
					// 如果i小于5
					if (i < 5) {
						// 绘制线
						ctx.strokeStyle = randomColor()
						// 开始路径
						ctx.beginPath()
						// 在 Canvas 绘图上下文中将当前路径的起始点移动到画布上的一个随机位置。
						ctx.moveTo(Math.random() * canvas_width, Math.random() * canvas_height)
						// 在 Canvas 绘图上下文中从当前路径的最后一个点绘制一条直线到一个新的随机位置。
						ctx.lineTo(Math.random() * canvas_width, Math.random() * canvas_height)
						// 绘制路径
						ctx.stroke()
					}
					// 绘制点
					ctx.strokeStyle = randomColor()
					ctx.beginPath()
					var x = Math.random() * canvas_width
					var y = Math.random() * canvas_height
					ctx.moveTo(x, y)
					ctx.lineTo(x + 1, y + 1)
					ctx.stroke()

				}


			}

			// 随机颜色生成一个随机的 RGB 颜色值
			function randomColor() {
				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})`

			}

		})
	</script>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/233488.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

c#生成二维码二维码中间添加定制LoGo

c#生成二维码二维码中间添加定制LoGo

&#x1f680;介绍 &#x1f340;QRCoder是一个开源的.NET库&#xff0c;用于生成QR码&#xff08;Quick Response Code&#xff09;。这个库是用C#编写的&#xff0c;并且可以在.NET框架的各种版本上使用&#xff0c;包括.NET Framework, .NET Core, Mono, Xamarin等。QRCode…
阅读更多...
深入解析Linux内核网络-拥塞控制系列(二）

深入解析Linux内核网络-拥塞控制系列(二）

上篇文章&#xff1a;深入解析Linux内核网络-拥塞控制系列(一&#xff09;对Linux内核网络中网络拥塞框架的框架进行了分析。本次针对具体的Cubic拥塞控制算法进行简单分析。在进行代码的梳理前&#xff0c;同样还是先来看一下相关概念、原理&#xff1a; 在上一篇文章中也提到…
阅读更多...
电脑出现这些现象，说明你的固态硬盘要坏了

电脑出现这些现象，说明你的固态硬盘要坏了

与传统机械硬盘&#xff08;HDD&#xff09;相比&#xff0c;固态硬盘&#xff08;SSD&#xff09;速度更快、更稳定、功耗更低。但固态硬盘并不是完美无瑕的&#xff0c;由于颗粒写入机制&#xff0c;可能会在七到十年的预期寿命之前出现故障。所以用户最好为最终故障做好准备…
阅读更多...
vue3 自己写一个月的日历

vue3 自己写一个月的日历

效果图 代码 <template><div class"monthPage"><div class"calendar" v-loading"loading"><!-- 星期 --><div class"weekBox"><div v-for"(item, index) in dayArr" :key"index&q…
阅读更多...
认识计算机的设备管理

认识计算机的设备管理

在计算机系统中&#xff0c;除了处理器和内存之外&#xff0c;其他的大部分硬设备称为外部设备。它包括输入/输出设备&#xff0c;辅存设备及终端设备等。这些设备种类繁多&#xff0c;特性各异&#xff0c;操作方式的差异很大&#xff0c;从而使操作系统的设备管理变得十分繁杂…
阅读更多...
数据仓库工具Hive

数据仓库工具Hive

1. 请解释Hive是什么&#xff0c;它的主要用途是什么&#xff1f; Hive是一个基于Hadoop的数据仓库工具&#xff0c;主要用于处理和分析大规模结构化数据。它可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供类似SQL的查询功能&#xff0c;将SQL语句转换为MapRedu…
阅读更多...
使用 iperf 和 iftop 测试网络带宽

使用 iperf 和 iftop 测试网络带宽

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…
阅读更多...
京东商品详情数据在数据分析行业中的重要性

京东商品详情数据在数据分析行业中的重要性

京东商品详情数据在数据分析行业中具有重要作用。这些数据提供了丰富的信息&#xff0c;可以帮助企业了解市场趋势、消费者需求、产品表现以及运营策略等多个方面。 首先&#xff0c;京东商品详情数据可以为企业提供市场趋势分析的依据。通过观察商品的销售量、销售额、价格等…
阅读更多...
Qt 6.5 类库实例大全：QObject

Qt 6.5 类库实例大全：QObject

大家好&#xff0c;我是20YC小二&#xff01;福利时间&#xff1a;欢迎(wx)扫码关注&#xff0c;免费领取《C程序员入门必修第一课&#xff1a;C基础课程》在线视频教程&#xff0c;还有更多技术分享&#xff01;#下面进入今天内容# 1. QObject 介绍 QObject 是 Qt 库中最重要…
阅读更多...
RocketMq集成SpringBoot(待完善)

RocketMq集成SpringBoot(待完善)

环境 jdk1.8, springboot2.7.3 Maven依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.3</version><relativePath/> <!-- lookup parent from…
阅读更多...
C++学习笔记:继承

C++学习笔记:继承

继承 什么是继承?继承的写法基类和派生类的赋值转换继承中的作用域派生类的默认成员函数单继承,多继承,虚拟继承is-a 和 has-a 什么是继承? 继承是C语言面向对象的三大特性之一&#xff0c;是面向对象程序设计使代码可以复用的最重要的手段,基本都是在一个类的基础上为了增加…
阅读更多...
一个简单的可视化的A星自动寻路

一个简单的可视化的A星自动寻路

一个简单的应用场景&#xff0c;流程图连线 源码&#xff1a; addExample("A星路径查找", function () {return {template: <div><div ref"main"></div></div>,data() { return {}; },computed: {},methods: {},mounted() {var c…
阅读更多...
2-3、运算符

2-3、运算符

语雀原文链接 文章目录 1、算术运算符2、关系运算符3、逻辑运算符4、赋值运算符5、移位运算符6、位运算符(二进制位进行运算)7、条件运算符:三目运算符8、运算符的优先级 1、算术运算符 &#xff1a;加法-&#xff1a;减法*&#xff1a;乘法/&#xff1a;除法取商%&#xff1…
阅读更多...
logback日志框架使用

logback日志框架使用

依赖引入 <dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><version>1.1.7</version> </dependency> 使用logback日志框架只需要引入以上即可&#xff0c;(我们平时使用较多的Slf4j…
阅读更多...
Fall in love with English

Fall in love with English

Fall in love with English 爱上英语 Hiding behind the loose dusty curtain, a teenager packed up his overcoat into the suitcase. 躲藏在布满尘土的松软的窗帘后边&#xff0c;一个年轻人打包他的外套到行李箱中。 He planned to leave home at dusk though there was th…
阅读更多...
ssh免密登录及scp/rsync免密传输文件的方式

ssh免密登录及scp/rsync免密传输文件的方式

在通过ssh登录其它电脑或通过scp/rsync同其它电脑之间传输文件时&#xff0c;每次都需要输入密码&#xff0c;如下图所示&#xff1a;在windows10上通过ssh登录虚拟机&#xff0c;每次登录都需要输入密码&#xff1b;若端口默认为22,可省略通过-p指定 可通过将本机上的公钥key存…
阅读更多...
熔池处理Tecplot 360 和CFD-Post做出一样的效果

熔池处理Tecplot 360 和CFD-Post做出一样的效果

熔池处理Tecplot 360 和CFD-Post做出一样的效果 效果展示详细讲述Tecplot 360实现过程分析实现过程第一步实现过程第二步界面美化注意点效果展示 详细讲述Tecplot 360实现过程 分析 这里主要是将体积分数大于0.5的区域抽取出来，然后显示温度场，所以这里主要考虑下面连个思考…
阅读更多...
Agent相关工作调研

Agent相关工作调研

API Bank 要解决两个问题&#xff1a; 1)目前的LLM在使用工具方面的效果如何&#xff1f; 2) LLM使用工具还存在哪些障碍&#xff1f; 理想的效果&#xff1a;&#xff1a;通过访问全球工具存储库&#xff0c;LLM可以通过概述实现需求所需的所有步骤来帮助人们规划需求。随后…
阅读更多...
你知道Java中的BigInteger类和BigDecimal类吗？

你知道Java中的BigInteger类和BigDecimal类吗？

BigInteger和BigDecimal&#xff1a; 我们在学习JavaSE基础的时候学习过int和double&#xff0c;前者是整形&#xff0c;后者是双精度浮点数&#xff0c;但它们是有最大值的&#xff0c;也就是说&#xff0c;他两并不支持无限大的数字。 其范围如下所示&#xff1a; 因此对于…
阅读更多...
图论-并查集

图论-并查集

并查集(Union-find Sets)是一种非常精巧而实用的数据结构,它主要用于处理一些不相交集合的合并问题.一些常见的用途有求连通子图,求最小生成树Kruskal算法和最近公共祖先(LCA)等. 并查集的基本操作主要有: .1.初始化 2.查询find 3.合并union 一般我们都会采用路径压缩 这样…
阅读更多...
最新文章

Copyright @ 2022~2023