H5 canvas-验证码

最新推荐文章于 2024-03-19 09:02:10 发布
最新推荐文章于 2024-03-19 09:02:10 发布
阅读量321 收藏
点赞数
分类专栏： 前端 前端插件 H5 文章标签： canvas 验证码 H5验证码 canvas验证码 H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42798905/article/details/94384277
版权
前端 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
H5
2 篇文章 0 订阅
订阅专栏
前端插件
1 篇文章 0 订阅
订阅专栏

H5 canvas-验证码

H5 canvas写的验证码插件，需引入jquery，可刷新，上图H5 canvas写的验证码插件，需引入jquery，可刷新，上图

HTML

<!DOCTYPE html>
<html>
<head>
	<title>VT Code</title>
	<link rel="stylesheet" type="text/css" href="VT Code.css">
</head>
<body>
<div class="wrapper">
	<div class="inputBox">
		<input type="text" name="" placeholder="请输入验证码">
		<span></span>
	</div>
	<p class="error"></p>
	<div class="canvasBox">
		<div class="imgBox">
			<canvas id="myCanvas" width=300 height=80></canvas>
		</div>
		<input type="button" class="refresh"></input>
	</div>
	<button class="submit">submit</button>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="VTCode.js"></script>
</body>
</html>

CS

 *{
 	margin: 0;
 	padding: 0;
 }
 .wrapper{
 	margin: 30px;
 	width: 345px;
 	padding: 15px;
 	border:1px solid #ccc;
 	border-radius: 5px;
 }
 .inputBox{
 		position: relative;
 }
 .inputBox input{
 	display: inline-block;
 	width: 300px;
 	outline: none;	/*去边框蓝光*/
 	padding: 15px;
 	border-radius: 5px;
 	border:1px solid #ccc;
 	box-sizing: border-box;	/*怪异盒模型，改变padding不改变总体大小*/
 }
 .inputBox span{
 	position: absolute;
 	right: 0;
 	/* display: inline-block; */
 	width: 30px;
 	height: 23.5px;
 	background: url('./img/true.png');
 	background-size: 100%;
 	display: none;
 	top: 50%;
 	margin-top: -11.75px;
 }
 .error{
 	color: red; 
 	margin-top: 10px;
 	font-size: 12px;
 	display: none;
 }
 .canvasBox{
 	position: relative;
 	margin-top: 15px;
 	/* border:1px solid #000; */
 }
 .canvasBox .imgBox{
 	width:300px;
 	height: 80px;
 	border: 1px solid #ccc;
 	border-radius: 5px;
 }
 .canvasBox .refresh{
 	position: absolute;
 	right: 0px;
 	top: 50%;
 	display: inline-block;
 	width: 30px;
 	height: 30px;
 	background: url('./img/refersh.png');
 	background-size: 100%;
 	margin-top: -15px;
 	border: 0;
 	outline: none;	/*去边框蓝光*/
 	cursor: pointer;	/*小手*/
 }
 .submit{
 	padding: 10px 20px;
 	border: 0;
 	background-color: greenyellow;
 	color: #fff;
 	font-size: 18px;
 	margin-top: 15px;
 	border-radius: 5px;
 	cursor: pointer;	/*小手*/
 }

JS


//生成字符串库，0~9,a~Z
var arr=[];
	for(var i=48;i<123;i++){
		if((i>57&&i<65)||(i>90&&i<97)){
			continue;
		}
 		arr.push(String.fromCharCode(i));
	}
	var value;
//实例化，画布对象
function createCanvas(){
	value='';
	//选取验证码
	var canvasStr="";
	for(var i=0;i<6;i++){
		canvasStr+=arr[Math.floor(Math.random()*arr.length)]+" ";
	}
	//生成验证码图片
	var myCanvas=document.getElementById('myCanvas');	//画布
	var ctx=myCanvas.getContext('2d');	//画笔
	var oImg=new Image();
	oImg.src='./img/bj.png';
	oImg.onload = function(){	//oImg(验证码图片)加载完执行
		var pattern=ctx.createPattern(oImg,'repeat');
		ctx.fillStyle=pattern;	//填充范围，父级myCanvas
		ctx.fillRect(0,0,myCanvas.width,myCanvas.height);	//填充起始坐标x，y 结束坐标x，y
		ctx.textAlign = 'center';	//文本中心对齐
		ctx.fillStyle='#ccc';
		ctx.font ='46px Roboto Slab';
		ctx.setTransform(1,-0.12,0.3,1,0,12);		//设置倾斜，缩放....
		ctx.fillText(canvasStr,myCanvas.width/2,60);	//填充验证码,开始位置

	}
	value=canvasStr;
}
createCanvas();
$('.submit').on('click',function(){
	showResult();
})
$('.refresh').on('click',function(){
	createCanvas();	//刷新验证码
})
function showResult(){
	var inputValue=$('.inputBox input').val();
	console.log(value.toLowerCase().replace(/\s+/g,"")+"  "+inputValue.replace(/\s+/g,"").toLowerCase())
	if(value.toLowerCase().replace(/\s+/g,"")==inputValue.replace(/\s+/g,"").toLowerCase()){
		// $('.inputBox span').css({
		// 	background:"url('./img/true.png')",
		// 	display :'inline-block'
		// })
		$('.error').css(display,'inline-block').html('验证码输入正确！');
		createCanvas();	//刷新验证码
	}else{
		// $('.inputBox span').css({
		// 	background:'url("./img/false.png")',
		// 	display:'inline-block'
		// });
		$('.error').css(display,'inline-block').html('验证码输入错误，请重新输入！');
		createCanvas();	//刷新验证码
	}
	
}
凐滅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5canvas实现随机验证码
06-20
使用HTML5和JS实现随机数，注意：此代码仅供娱乐，真正的项目中创建验证码都 是使服务器端技术！！
h5拖动图片验证码js插件
06-15
此插件使用h5的cancas画布，最终封装为jquery插件，因为canvas有跨域问题查看效果请启动server 访问，不要使用文件系统（file:///C:/Users/）访问，使用方式如下： $("#captcha").imgVerifyCode({ imgPath: "http://localhost:63342/ImgAuthCode/imgVerifyCode/img/",//背景图存放目录地址 imgNum: 6,//背景图个数 success: function () { alert("success"); } })
h5图形验证码
成长笔记
11-12 1011
drawPic(); /**生成一个随机色**/ function randomColor(min, max) { var r = randomNum(min, max); var g = randomNum(min, max); var b = randomNum(min, max); return "rgb(" + r + "," + g + "," + b + ")"; } /**绘制验证码图片**/ function drawPic() { ...
H5 canvas绘制验证码
u014636613的博客
05-21 202
<!DOCTYPE HTML> <html lang="en"> <meta charset="utf-8"> <body> <canvas id="canvas" width="120" height="40"></canvas> <a href="#" id="chan...
H5——canvas实现生成验证码图片
CaseyWei
11-02 1129
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &lt;title&
js+h5 canvas实现图片验证码
10-14
总结来说，js+h5 canvas实现图片验证码的核心在于利用Canvas API的绘图功能，结合JavaScript的随机数生成，创造出具有随机性和复杂性的验证码图像。这种实现方式不仅能够满足基本的安全需求，还能根据需要进行自定义...
利用html5 canvas破解简单验证码及getImageData接口应用
12-14
敝校的教务管理系统（貌似不止我们学校用呢），一到... 说下思路：HTML 5中的canvas有个接口getImageData可以用来从验证码图像中取得像素数据。每一个像素有对应r,g,b,a四个值，r,g,b是红绿蓝三色，a是透明度。 观察
灰常好看的H5登录界面-一年后的西瓜-
11-07
H5的特性如离线存储（Web Storage）、拖放功能（Drag and Drop）、媒体元素（Audio & Video）以及Canvas和SVG等图形渲染，都使得H5成为创建动态、响应式登录界面的理想选择。这些特性可以使登录过程更加互动，例如...
html5&css&js代码 025 验证码生成与验证
最新发布
明月看潮生的博客
03-19 936
这段HTML代码实现了一个简单的客户端验证码生成与验证功能。页面上会显示一个验证码图片，用户需要在输入框中输入看到的验证码，然后点击验证按钮进行验证。
H5实现拖动验证码.zip
06-15
适用浏览器：Safari、IE8、360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗等
H5注册页面，手机号验证，验证码验证，错误提示
11-29
实现注册页面，包括手机号验证，验证码验证，错误提示等
H5 可拖拽验证码
06-09
H5 移动 拖拽 验证码
H5+css3+js搭建带验证码的登录页面
10-14
主要为大家详细介绍了H5+css3+js搭建带验证码的登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
h5-用canvas绘制图形验证码
宇哥大男神的博客
03-21 525
利用canvas来绘制一个图形验证码 话不多说，直接贴代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <canvas id="code"...
Html5生成验证码
热门推荐
qq_24528945的博客
07-05 1万+
Html5生成验证码利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码，背景为随机生成的颜色和杂乱的直线与点点。 进阶：利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。 代码块<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证码</titl
H5+JS生成验证码，并支持点击刷新，验证码校验
OxygenChen
04-12 7042
H5+JS生成验证码 JS代码，拷贝下来复制即可，不说太多，直接上代码 JS代码，拷贝下来复制即可，不说太多，直接上代码 !(function(window, document) { function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数 this.options = { //默认options参数值...
【36】一个canvas写的验证码
程序猿的博客
10-25 253
想看效果的童鞋们请移步鑫大大小屋<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" width="150" height="50"></canvas> <script> function rando
vue开发H5 实现滑动图片获取验证码
qq_41154522的博客
01-12 715
vue开发H5 实现滑动图片获取验证码。
图形验证码功能编写
恍若c的博客
08-25 154
H5图形验证码功能，初始化显示图形验证码，点击图片切换验证码图片 <li> <span class="ipt-name captcha"></span> <input type="text" maxlength="11" placeholder="请输入验证码" v-model="graphValidateCode" /> <img @click="chan.
vue使用canvas-editor
03-09
Vue使用Canvas-Editor是一个基于Vue框架的Canvas编辑器组件，它可以帮助你在网页中创建和编辑Canvas图形。通过Canvas-Editor，你可以轻松地添加、移动、缩放和旋转图形，以及设置图形的样式和属性。 Canvas-Editor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值