HTML5 Canvas简介（三）_编写验证码

最新推荐文章于 2022-06-13 08:57:21 发布

萧萧可乐

最新推荐文章于 2022-06-13 08:57:21 发布

阅读量3.1k

点赞数

分类专栏： HTML5 文章标签： html5 function border browser table input

本文链接：https://blog.csdn.net/NIHAOX1/article/details/7682292

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en">
<meta charset="utf-8">
<script type="text/javascript" src="JS/JQ.js"></script>
<style>
@charset "utf-8";
/* CSS Document */
body{background:url(images/img10.jpg) no-repeat fixed;}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div{margin:0; padding:0;}
body, input,select,textarea{color:#000; font:12px/1.8 "微软雅黑",Arial, Helvetica, sans-serif;}
img{border:0; vertical-align:middle;}
table{width:100%; border:0; border-collapse:collapse; border-spacing:0;}
ul,ol,li{list-style-type:none;}
a{color:#000; outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}
.contain{width:500px; margin:0 auto; padding-top:200px;}
</style>
<body>
<div class="contain">
<canvas id="myCanvas" height="300px" width="500px">your browser does not support the canvas tag </canvas>
<br/>
<input type="text"><button onClick="pass()">提交</button>
</div>
</body>
<script type="text/javascript">
var canvas=$("#myCanvas").get(0);
var _canvas=$("#myCanvas").get(0).getContext("2d");
var return_str="";
var _ifstart=false;
var _B_x=0;
var _B_y=0;
function can_click(){
		
};
function pass(){
	var _val=$(":text:eq(0)").val();
	if(_val==return_str){
		alert('您通过验证了！');	
	}else{
		alert('您输入的验证码不正确！');	
	};
}
function start(){
	try{
		function drawscreen(){
			_canvas.fillStyle="#ffffaa";
			_canvas.fillRect(0,0,500,300);	
			_canvas.strokeStyle="#000";
			_canvas.strokeRect(5,5,490,290);
		};
		function write_text(_str){
			_canvas.fillStyle="#000000";
			_canvas.font="20px _sans";
			_canvas.textBaseline="top";
			_canvas.fillText(_str,195,80);
		};
		function getabc(){
			var _str="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,0,1,2,3,4,5,6,7,8,9";
			var _str_array=_str.split(",");
			return_str="";
			for(i=0;i<4;i++){
				var _rnd=Math.floor(Math.random()*_str_array.length);
				return_str+=_str_array[_rnd];
			};
		};
		drawscreen();
		getabc();
		write_text(return_str);
	}catch(e){
		alert(e);	
	}
};
$(document).ready(function(e) {
	start();
});
</script>
</html>

代码比较简单就不解释了。。。

萧萧可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas简介（三）_编写验证码

@charset "utf-8";/* CSS Document */body{background:url(images/img10.jpg) no-repeat fixed;}body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div{margin:0; padding:0;}body, input,sel
复制链接

扫一扫