Canvas实现一个带干扰线条的随机数验证码

最新推荐文章于 2021-11-04 19:23:44 发布

「已注销」

最新推荐文章于 2021-11-04 19:23:44 发布

阅读量1.1k

点赞数 7

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_36276469/article/details/86498088

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="can" width="120" height="40" style="border: 1px solid #555555;">
		
		</canvas>
		<script>
			var can=document.getElementById("can");
			var con=can.getContext('2d');
			
			//随机生成从最小值到最大值的一组数字
			function rand(min,max) {
		        return Math.floor(Math.random()*(max-min))+min;
		    }
			//随机显示一根线条
	        function drawline(canvas, context) { 
	        		context.beginPath();
	                //起点与终点在canvas宽高内随机
	                context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  
	                context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  
	                context.lineWidth = 1;	                
	                context.strokeStyle = '#275DB3';	       
	                context.stroke();  
	        }
	        linesum();
	        //循环显示多条线条
	        function linesum(){
	       		//每次调用该方法填充一次颜色覆盖之前的
       	 		con.fillStyle='white';
				//填充一个矩形 x,y坐标，x,y宽度
				con.fillRect(0,0,can.width,can.height);
		       	for (var i=0;i<20;i++) {
			       	drawline(can, con);
			    }
		    }
	        //验证码
	        function code(){
		       	var randnum=rand(1000,9999);				
				//居中
				con.textAlign = "center";
				con.font="25px 宋体";
				con.fillStyle="red";
				con.fillText(randnum,60,30);
	        }
	        code();
	        //点击触发函数
			can.onclick=function(){
				linesum();
				code();
			}
			
		</script>
	</body>
</html>

写的不是很好，大神可以提点我下，谢谢

「已注销」

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现一个带干扰线条的随机数验证码

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="can" width=&
复制链接

扫一扫