前端實現驗證碼生成

實現此功能，可以先拆分出驗證碼有以下要素：

1. 隨機凌亂字元生成
2. 隨機的背景色調
3. 隨機出現的遮擋線與點

要實現此功能我們可以使用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的繪畫是逐層遮擋的，也就是說後進行的步驟能夠遮擋前進行的步驟
所以背景色調必須要在其他繪圖之前進行才行

而如果背景色最後繪製會完全遮擋其他東西,如下圖:

實際上,這樣的遮擋也有一些好處，比如我們可以不需要清空了
當下一層使用背景色的時候自然會完全覆蓋掉前面的所有東西，而後不需要清理其他的文字，遮擋線，點都能清晰的呈現在上面了

以上就是全部了，效果實際上與以往的驗證碼一樣
只是分析並增加了比較詳細的註釋而已****