原生JS+canvas生成验证码

投稿作者:IF 围观人数:742 所属分类:HTML源码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		canvas{
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="120" height="40"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementsByTagName(''canvas'')[0];
		//开一张2D图
		var context = canvas.getContext("2d");
		var text = "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、0";
		textp = text.split("、");
		//绘制一张从(0,0)开始的长120px 宽40px的图
		context.strokeRect(0,0,120,40);
		draw();
		canvas.onclick = function(){
			context.clearRect(0,0,120,40);
			draw();
		};
		function draw(){
			for(var i = 0;i<4;i++){
				 x = 20 + 20 * i;
				 y = 20 + 20 * Math.random();
				var index = Math.floor(Math.random()*textp.length);
				var txt = textp[index];
				//我要写的字样
				context.font="bold 20px 微软雅黑";
				//我要写的字的颜色
				context.fillStyle = getColor();
				//我要把txt重获取的随机字符写在位于x与y的坐标上
				context.fillText(txt,x,y);
			}
		//干扰线
			for(var i = 0; i<6;i++){
				context.beginPath();
				context.moveTo(120*Math.random(),40*Math.random());
				context.lineTo(120*Math.random(),40*Math.random());
				context.strokeStyle = getColor();
				context.stroke();
			}
			function getColor(){
				var red = Math.floor(Math.random()*256);
				var green = Math.floor(Math.random()*256);
				var blue = Math.floor(Math.random()*256);
				return "rgb("+red+","+green+","+blue+")";
			}
		}
		
		function randNum(){
			return 
		}
	</script>
</body>
</html>

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

已有次赞
我要评论 0条评论,0条回复
请先登录后再评论

登录您的账号