在登录时我们经常遇到输入验证码,看完这篇文章你也可以制作出验证码,让验证码不再神奇。
效果如图:
HTML代码:
<canvas id="canvas"></canvas> <button id="btn">点击换一张</button>
JS代码:
var canvas = document.getElementById("canvas");//获取到canvas对象! var context = canvas.getContext("2d");//获取到canvas的绘图环境! canvas.width = 200;//设置canvas宽度 canvas.height = 40;//设置canvas高度 context.font = "bold 20px 微软雅黑";//设置字体 context.strokeRect(0, 0, 200, 40);//绘制一个矩形框 var aCode = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9','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'];
页面加载和点击按钮刷新验证码:
getNewValidate(); //页面加载先调用
var btn = document.getElementById("btn"); //点击刷新获取新的验证码 btn.onclick=function(){ getNewValidate(); };
生成验证码:
function getNewValidate(){ context.clearRect(0,0,200,40);//清除画布 getValidate(6);//生成一个六位数的验证码 drawPoint(100);//画100个干扰点 drawLine(8);//画8条干扰线 };
生成n位数的验证码:
function getValidate(n){ for (var i = 0; i < n; i++) { var x = 20 + i * 20; var y = 20 + Math.random() * 10; var index = Math.floor(Math.random() * aCode.length);//获取到随机的索引值 var txt = aCode[index];//获取到随机的内容 context.fillStyle = getColor();//设置字体颜色 context.translate(x, y);//字体移动 var deg = 180 * Math.random() * Math.PI / 180; context.rotate(deg);//字体随机旋转度数 context.fillText(txt, 0, 0);//将文字写到canvas上面 context.rotate(-deg); context.translate(-x, -y); } }
画X个干扰点:
function drawPoint(X){ for (var i = 0; i < X; i++) { context.beginPath(); var x = Math.random() * 200; var y = Math.random() * 40; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.strokeStyle = getColor(); context.stroke();//开始绘制 } }
画m条干扰线:
function drawLine(m){ for (var i = 0; i < m; i++) { context.beginPath(); //开始一个路径 context.moveTo(Math.random() * 200, Math.random() * 40);//设置起点坐标 context.lineTo(Math.random() * 200, Math.random() * 40);//设置终点坐标 context.strokeStyle = getColor(); context.stroke();//开始绘制 } }
验证码随机生成颜色值:
function getColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; }不防亲自动手试一试,距制作只差动动手指