前端实现验证码生成

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

随机凌乱字符生成
随机的背景色调
随机出现的遮挡线与点

要实现此功能我们可以使用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的绘画是逐层遮挡的，也就是说后进行的步骤能够遮挡前进行的步骤
所以背景色调必须要在其他绘图之前进行才行

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

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

以上就是全部了，效果实际上与以往的验证码一样
只是分析并增加了比较详细的注释而已****

前端以canvas实现验证码详解

前端实现验证码生成

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

下面让我们逐项实现

猜你喜欢