js验证码干扰(静态)

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
     
     
				padding: 0;
				margin: 0;
			}
			canvas{
     
     
				background: #272822;
			}
		</style>
	</head>
	<body>
		<canvas id='canvas' width='800' height='500'></canvas>
		<script>
			//获得画板
			var canvas=document.getElementById('canvas');
			//获得绘画环境
			var cv=canvas.getContext('2d');
			
			cv.fillStyle='#272822';
			cv.fillRect(0,0,800,500);
			cv.font='80px 微软雅黑';
			cv.fillStyle='greenyellow';
			cv.fillText( Math.floor(Math.random()*10000),200,200);
			
			//获得所有的图像像素点信息
			var alldata=cv.getImageData(0,0,800,500);
			//获得像素点的个数
			var dian=alldata.data.length/4;
			for(var i=0;i<10000;i++){
     
     
				//取随机数
				var num=Math.floor(Math.random()*dian);
				//计算像素点对应的四条信息从几号开始
				var start=(num-1)*4;
				alldata.data[start]=Math.floor(Math.random()*256);
				alldata.data[start+1]=Math.floor(Math.random()*256);
				alldata.data[start+2]=Math.floor(Math.random()*256);
			}
			//将数据写回画板
			cv.putImageData(alldata,0,0);
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_44635198/article/details/113921972
今日推荐