js实现验证码干扰（静态）_js教程

js实现验证码干扰（静态）

2022-01-22 18:58lzh~ js教程

这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现验证码干扰的具体代码，供大家参考，具体内容如下

效果

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>