前端实现验证码生成
实现此功能,可以先拆分出验证码有以下要素:
- 随机凌乱字符生成
- 随机的背景色调
- 随机出现的遮挡线与点
要实现此功能我们可以使用css3中canvas元素,通过js我们可以
非常简单的实现前端生成验证码。
下面让我们逐项实现
我们先在html中创建一个canvas元素用于存放验证码
注意其中的width和height属性是没有px的
<canvas onclick="drawverification()" id="verification" width="130" height="50"></canvas>
而后根据需求,随机是很重要的,为了方便使用
我们创建一个能够随机生成一个范围内数字的函数
function random(min, max) {
var x=Math.floor(Math.random() * (max - min) + min);//math.floor函数十分重要,他可以将小数转换为整数,避免rgb和数组无法识别
return x;
}
再然后为了字体和背景与遮挡线的多彩,我们可以创建一个
随机色彩的函数,同时考虑进制转换。我们选择样式用rgb书写
function color(min, max) {
var rgb_r = random(min, max);
var rgb_g = random(min, max);
var rgb_b = random(min, max);
return "rgb(" + rgb_r + "," + rgb_g + "," + rgb_b + ")";
}
var check=""; //储存结果
最后我们就可以开始绘制验证码了,我们从凌乱字符生成开始做起
function drawverification(){
var width = document.getElementById("verification").width;
var height = document.getElementById("verification").height;
var verification = document.getElementById("verification").getContext("2d"); //获取绘图对象
var string = 'ABCEFGHJKLMNPQRSTWXY123456789'; //生成字符库
verification.textBaseline = 'bottom'; //设置其对于基准线的位置
//后方使用的high最高为50故在基准线下方可防止超出画图空间
for (var i = 0; i < 4; i++) {
var txt = string[random(0, string.length)];//随机获取一个字符
check = check + txt; //作为结果返回提供验证
verification.fillStyle = color(50, 160); //注意字体与背景的颜色随机区间
verification.font = random(25, 40) + 'px SimHei'; //字体大小随机,注意不要过小,便于用户阅读
var x = 10 + i * 30; //每个字符的位置
var y = random(25, 50);
var deg = random(-60, 60);
verification.translate(x, y); //改变字符位置
verification.rotate(deg * Math.PI / 180); //使字符旋转一定角度
verification.fillText(txt, 0, 0);
verification.rotate(-deg * Math.PI / 180);//复位旋转与原点,避免下个字符在原有基础旋转
verification.translate(-x, -y);
}
完成效果:
这里实现了背景色
verification.fillStyle = color(180, 240); //选择随机背景色
verification.fillRect(0, 0, width, height); //填充区域
最后就是遮挡线与点了
for (var i = 0; i <5; i++) {
verification.strokeStyle = color(40, 180); //切断线段,避免色调相同
verification.beginPath(); //开始新路径绘制
verification.moveTo(random(0, width), random(0, height));//移动至随机点
verification.lineTo(random(0, width), random(0, height));//从移动点为基点画至此点
verification.stroke();//开始绘制
} //更改i可以更改生成线条数
for (var i = 0; i < 50; i++) {
verification.fillStyle = color(0, 255);//点的填充色
verification.beginPath(); //开始新路径绘制
verification.arc(random(0, width), random(0, height), 1, 0, 2 * Math.PI);//实际上就是画圆只不过r=1所以变成点了
verification.fill();//最后就是填充了
}
}
完成效果:
最后还有一些注意事项: canvas的绘画是逐层遮挡的,也就是说后进行的步骤能够遮挡前进行的步骤
所以背景色调必须要在其他绘图之前进行才行
而如果背景色最后绘制会完全遮挡其他东西,如下图:
实际上,这样的遮挡也有一些好处,比如我们可以不需要清空了
当下一层使用背景色的时候自然会完全覆盖掉前面的所有东西,而后不需要清理其他的文字,遮挡线,点都能清晰的呈现在上面了
以上就是全部了,效果实际上与以往的验证码一样
只是分析并增加了比较详细的注释而已****