前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原生js配合canvas实现验证码的生成与验证

原生js配合canvas实现验证码的生成与验证

作者头像
许喜朝
发布2022-05-05 16:57:42
1.4K0
发布2022-05-05 16:57:42
举报
文章被收录于专栏:生如夏花的个人博客

原生js配合canvas实现验证码的生成与验证

代码语言:javascript
复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#main{
				display: flex;
			}
			#input{
				width: 120px;
				height: 40px;
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<canvas id="canvas" width="120" height="40"></canvas>
			<a href="" onclick="reload()">看不清换一张</a>
			<input type="text" name="" id="input" value=""/>
			<button type="button" onclick="validation()">验证</button>
			
		</div>
		
		<script type="text/jscript">
			
			function yzmFun(selector,w,h){
			// 随机数的生成
			function randomNum(min,max){
				return parseInt(Math.random()*(max-min)+min)
			}
			//随机生成颜色的函数
			function randomColor(min,max) {
				let r = randomNum(min,max)
				let g = randomNum(min,max)
				let b = randomNum(min,max)
				return `rgb(${r},${g},${b})`
			}
			// let w = w
			// let h = h
			let canvas = document.querySelector(selector)
			let ctx = canvas.getContext('2d')
			//在canvas绘制背景颜色
			ctx.fillStyle = randomColor(180,230)
			ctx.fillRect(0,0,w,h)
			//随机字符串
			let pool = 'ABCDEFGHIGKLIMNOPQRSTUVWXYZabcdefghigklimnopqrstuvwxyz1234567890'
			let yzm = ''
			//生成随机的验证码
			for(let i = 0;i<4;i++){
				let c = pool[randomNum(0,pool.length)]
				//随机出字体大小
				let fs = randomNum(18,40)
				//随机字体角度
				let deg = randomNum(-30,30)
				ctx.font = fs + 'px Simhei'
				ctx.textBaseline = 'top'
				//设置字体颜色
				ctx.fillStyle = randomColor(80,150)
				//保存
				ctx.save()
				//位置
				ctx.translate(30*i+15,15)
				//旋转
				ctx.rotate(deg*Math.PI/180)
				ctx.fillText(c,-10,-10)
				ctx.restore()
				yzm+=c
			}
			//随机生成干扰线
			for(let i = 0;i<5;i++){
				ctx.beginPath()
				ctx.moveTo(randomNum(0,w),randomNum(0,h))
				ctx.lineTo(randomNum(0,w),randomNum(0,h))
				ctx.strokeStyle = randomColor(180,230)
				ctx.closePath()
				ctx.stroke()
			}
			//随机产生干扰圆点
			for(let i = 0;i<40;i++){
				ctx.beginPath()
				ctx.arc(randomNum(0,w),randomNum(0,h),1,0,2*Math.PI)
				ctx.fillStyle = randomColor(150,200)
				ctx.fill()
			}
			return yzm
			}
			//调用生成验证码
			let yzmStr = yzmFun('#canvas',120,40).toLowerCase()
			
			//验证验证码是否正确
			function validation(){
				//获取input的值转换为小写
				let yzmInput = document.getElementById('input').value.toLowerCase()
				if(yzmStr === yzmInput){
					window.location.href="success.html"
					alert("成功")
					
				}else{
					alert("验证码错误")
					location.reload()
				}
				
			}
			//更换验证码
			function reload(){
				location.reload()
			}
			console.log(yzmStr)
			
			
		</script>
	</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原生js配合canvas实现验证码的生成与验证
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档