前端验证码生成

Posted 2021-05-01 有段天线

前端实现验证码生成

---

实现此功能，可以先拆分出验证码有以下要素：

1. 随机凌乱字符生成

2. 随机的背景色调

3. 随机出现的遮挡线与点

---

要实现此功能我们可以使用css3中canvas元素，通过js我们可以
非常简单的实现前端生成验证码。

下面让我们逐项实现

我们先在html中创建一个canvas元素用于存放验证码

注意其中的width和height属性是没有px的

1<canvas onclick="drawverification()" id="verification" width="130" height="50"></canvas>

而后根据需求，随机是很重要的,为了方便使用
我们创建一个能够随机生成一个范围内数字的函数

1function random(min, max) {
2var x=Math.floor(Math.random() * (max - min) + min);//math.floor函数十分重要，他可以将小数转换为整数，避免rgb和数组无法识别
3return x;
4}

再然后为了字体和背景与遮挡线的多彩，我们可以创建一个
随机色彩的函数，同时考虑进制转换。我们选择样式用rgb书写

1function color(min, max) {
2    var rgb_r = random(min, max);
3    var rgb_g = random(min, max);
4    var rgb_b = random(min, max);
5    return "rgb(" + rgb_r + "," + rgb_g + "," + rgb_b + ")";
6}
7var check="";                             //储存结果

最后我们就可以开始绘制验证码了,我们从凌乱字符生成开始做起

 1function drawverification(){
 2var width = document.getElementById("verification").width;
 3var height = document.getElementById("verification").height;
 4var verification = document.getElementById("verification").getContext("2d");    //获取绘图对象
 5var string = 'ABCEFGHJKLMNPQRSTWXY123456789';  //生成字符库
 6verification.textBaseline = 'bottom';                  //设置其对于基准线的位置
 7                                               //后方使用的high最高为50故在基准线下方可防止超出画图空间
 8for (var i = 0; i < 4; i++) {
 9    var txt = string[random(0, string.length)];//随机获取一个字符
10    check = check + txt;                       //作为结果返回提供验证
11    verification.fillStyle = color(50, 160);   //注意字体与背景的颜色随机区间
12    verification.font = random(25, 40) + 'px SimHei'; //字体大小随机，注意不要过小，便于用户阅读
13    var x = 10 + i * 30;                        //每个字符的位置
14    var y = random(25, 50);
15    var deg = random(-60, 60);                   
16    verification.translate(x, y);              //改变字符位置
17    verification.rotate(deg * Math.PI / 180); //使字符旋转一定角度
18    verification.fillText(txt, 0, 0);
19    verification.rotate(-deg * Math.PI / 180);//复位旋转与原点，避免下个字符在原有基础旋转
20    verification.translate(-x, -y);
21}

完成效果:

这里实现了背景色

1verification.fillStyle = color(180, 240);     //选择随机背景色
2verification.fillRect(0, 0, width, height);   //填充区域

最后就是遮挡线与点了

 1for (var i = 0; i <5; i++) {
 2         verification.strokeStyle = color(40, 180);  //切断线段，避免色调相同       
 3         verification.beginPath();                   //开始新路径绘制
 4         verification.moveTo(random(0, width), random(0, height));//移动至随机点
 5         verification.lineTo(random(0, width), random(0, height));//从移动点为基点画至此点
 6         verification.stroke();//开始绘制
 7    } //更改i可以更改生成线条数
 8    for (var i = 0; i < 50; i++) {
 9         verification.fillStyle = color(0, 255);//点的填充色
10         verification.beginPath();              //开始新路径绘制
11        verification.arc(random(0, width), random(0, height),   1, 0, 2 * Math.PI);//实际上就是画圆只不过r=1所以变成点了
12        verification.fill();//最后就是填充了
13    }
14}

完成效果:

---

最后还有一些注意事项:  canvas的绘画是逐层遮挡的，也就是说后进行的步骤能够遮挡前进行的步骤
所以背景色调必须要在其他绘图之前进行才行

而如果背景色最后绘制会完全遮挡其他东西,如下图:

实际上,这样的遮挡也有一些好处，比如我们可以不需要清空了
当下一层使用背景色的时候自然会完全覆盖掉前面的所有东西，而后不需要清理其他的文字，遮挡线，点都能清晰的呈现在上面了

---