验证码干扰点实现思路（H5）
2017-05-30 本文已影响234人
被时光移动的城
一个简单小例子实现验证码干扰点效果。
实现效果：
干扰点多的运行效果图.png
干扰点少的运行效果图.png
实现原理：
获取图像信息——>修改图像信息
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
margin: 300px auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var can = document.getElementById("can");
var cv = can.getContext('2d');
//绘制矩形
cv.fillStyle = 'black';
cv.fillRect(0,0,400,200);
//设置文字
cv.fillStyle = 'red';
var str = '好好学习，天天向上';
cv.font = '40px Arial';
cv.fillText(str,25,120);
//获得图像信息
var imgData = cv.getImageData(0,0,400,200);
//获得像素点个数
var pointNum = imgData.data.length/4;
//修改的像素（干扰点）点个数，这里假设修改1000个
for(var i=0;i<1000;i++){
//取随机数
var num = Math.floor(Math.random()*pointNum);
//计算像素点对应的四条信息从几号开始
var start = (num-1)*4;
imgData.data[start] = Math.floor(Math.random()*256);
imgData.data[start+1] = Math.floor(Math.random()*256);
imgData.data[start+2] = Math.floor(Math.random()*256);
}
cv.putImageData(imgData,0,0);
}
</script>
</head>
<body>
<canvas id="can" width="400" height="200"></canvas>
</body>
</html>
如有问题欢迎交流。
如转载请注明出处，谢谢！
