網(wǎng)頁設(shè)計(jì)中，尤其表單填寫提交過程中，為防止機(jī)器自動(dòng)登錄，很多網(wǎng)頁都采用驗(yàn)證碼技術(shù)，允許用戶輸入而盡量避免自動(dòng)登錄。驗(yàn)證碼實(shí)現(xiàn)的方法有很多，PHP繪圖技術(shù)可以在服務(wù)端生成驗(yàn)證碼并發(fā)送客戶端，HTML5技術(shù)下可以使用canvas與JS腳本實(shí)現(xiàn)在客戶端瀏覽器自動(dòng)生成驗(yàn)證碼。本文給出JS+Canvas驗(yàn)證碼的解決措施，所制作驗(yàn)證碼實(shí)現(xiàn)效果如下圖所示：

實(shí)現(xiàn)原理

本例驗(yàn)證碼的實(shí)現(xiàn)主要包括驗(yàn)證碼字符串的生成、背景干擾點(diǎn)實(shí)現(xiàn)及干擾直線的生成三部分。最終通過canvas繪圖技術(shù)將生成的驗(yàn)證碼字符串、背景及干擾直線顯示到畫布上。主要涉及技術(shù)或知識(shí)點(diǎn)包括canvas繪圖技術(shù)、數(shù)組、鼠標(biāo)點(diǎn)擊事件、隨機(jī)函數(shù)等。以下從驗(yàn)證字符串、背景干擾點(diǎn)及干擾直線三方面對(duì)實(shí)現(xiàn)過程進(jìn)行說明。

驗(yàn)證字符串

驗(yàn)證字符串部分主要借助數(shù)組存儲(chǔ)驗(yàn)證碼所有字符，通過調(diào)用Math對(duì)象的隨機(jī)函數(shù)獲取數(shù)組下標(biāo)，并通過數(shù)組下表讀取數(shù)組元素，將讀取的數(shù)組元素組裝成完整字符串。其實(shí)現(xiàn)核心代碼如下：

如上圖所示，本例驗(yàn)證碼字符包括數(shù)字與大寫字母，getCode函數(shù)返回值即為4位驗(yàn)證碼字符串。

背景干擾點(diǎn)

背景干擾點(diǎn)可以直接使用canvas對(duì)應(yīng)的繪圖方法進(jìn)行繪制，本例為簡化開發(fā)過程，降低難度直接使用drawImage繪圖方式加載背景圖片，實(shí)現(xiàn)干擾點(diǎn)效果。背景圖片如下：

通過調(diào)用drawImage方法，指定截取的坐標(biāo)位置參數(shù)，可實(shí)現(xiàn)背景干擾點(diǎn)的動(dòng)態(tài)變化效果，背景干擾點(diǎn)實(shí)現(xiàn)核心代碼如下：

其中g(shù)etXsize與getYsize為獲取繪圖截取背景圖片的坐標(biāo)位置，通過使用隨機(jī)函數(shù)實(shí)現(xiàn)從背景圖片不同位置截取進(jìn)行繪圖輸出。

干擾直線

干擾直線實(shí)現(xiàn)較為簡單，直接通過JS提供的moveTo與lineTo方法完成直線的繪制，本例繪制了兩條直線，一條為黑色干擾線，一條為白色干擾線。在繪制過程兩端點(diǎn)需要使用Math隨機(jī)函數(shù)生成符合條件隨機(jī)坐標(biāo)。干擾直線相關(guān)實(shí)現(xiàn)代碼如下：

干擾直線實(shí)現(xiàn)核心代碼如上圖，其中g(shù)etLsize方法主要用于獲取隨機(jī)端點(diǎn)Y軸坐標(biāo)值。strokeStyle主要用于設(shè)置繪圖直線的顏色。

驗(yàn)證碼顯示輸出

驗(yàn)證碼的顯示輸出主要使用fillText()方法在canvas指定位置進(jìn)行文字輸出，本例使用第三方ttf字體，因此在HTML頁面中對(duì)字體進(jìn)行了加載。驗(yàn)證碼顯示輸出實(shí)現(xiàn)代碼如下：

驗(yàn)證碼顯示輸出核心代碼如上圖所示，其中myfont為加載的第三方字體。

繪圖基礎(chǔ)部分

繪圖基礎(chǔ)部分主要包括前端canvas元素的布局等。包括屬性的設(shè)置，js部分元素的獲取及屬性設(shè)置等。

其他工作

我們一般接觸的驗(yàn)證碼，都可以點(diǎn)擊圖片實(shí)現(xiàn)驗(yàn)證碼的刷新，因此本例為canvas標(biāo)記添加了onclick事件，將所有驗(yàn)證碼生成的代碼封裝到showCode()函數(shù)中，通過調(diào)用showCode函數(shù)實(shí)現(xiàn)驗(yàn)證碼的刷新。本例完整JS腳本部分代碼如下：

本頭條號(hào)長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！如需案例完整代碼請(qǐng)關(guān)注并私信，往期前端設(shè)計(jì)文章鏈接如下：

1. 前端設(shè)計(jì)-Ajax技術(shù)及實(shí)例展示
2. 前端設(shè)計(jì)-響應(yīng)式頁面開發(fā)基礎(chǔ)
3. Web開發(fā)前端、后端與全棧的區(qū)別是什么？

些日子接觸到一個(gè)項(xiàng)目，要求實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼，參考萬能的百度結(jié)合自己的想法實(shí)現(xiàn)了一個(gè)簡單的前端驗(yàn)證碼，當(dāng)然跟后臺(tái)的不能比安全性，

頁面部分：

<div class="new-web-row"><span class="web-form-span " >驗(yàn)證碼</span><input type="text" class=" web-form-input " required="required" id="Yzm" style="width: 30%;float: initial; margin-left: 27%;" ><input type = "button" id="code" value="點(diǎn)我驗(yàn)證" class="btn-list-btn" style="margin:0;float: right;width:20%" onclick="createCode()"/>

js實(shí)現(xiàn)部分：

var code ; //在全局定義驗(yàn)證碼

//產(chǎn)生驗(yàn)證碼

function createCode(){

code = "";

var codeLength = 4;//驗(yàn)證碼的長度

var checkCode = document.getElementById("code");

var random = new Array(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');//隨機(jī)數(shù)

for(var i = 0; i < codeLength; i++) {//循環(huán)操作

var index = Math.floor(Math.random()*36);//取得隨機(jī)數(shù)的索引（0~35）

code += random[index];//根據(jù)索引取得隨機(jī)數(shù)加到code上

}

checkCode.value = code;//把code值賦給驗(yàn)證碼

}

//校驗(yàn)驗(yàn)證碼

document.getElementById("Yzm").addEventListener("change",validate);

function validate(){

var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得輸入的驗(yàn)證碼并轉(zhuǎn)化為大寫

if(inputCode.length <= 0) { //若輸入的驗(yàn)證碼長度為0

alert("請(qǐng)輸入驗(yàn)證碼！"); //則彈出請(qǐng)輸入驗(yàn)證碼

$("#Yzm").focus();

YZM = false;

}

else if(inputCode != code ) { //若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時(shí)

alert("驗(yàn)證碼輸入錯(cuò)誤！@_@"); //則彈出驗(yàn)證碼輸入錯(cuò)誤

createCode();//刷新驗(yàn)證碼

$("#Yzm").val("");//清空文本框

$("#Yzm").focus();//重新聚焦驗(yàn)證碼框

YZM = false;

}

else { //輸入正確時(shí)

$("#Yzm").blur();//綁定驗(yàn)證碼輸入正確時(shí)要做的事

YZM = true;

}

};

附效果圖：

證碼在很多網(wǎng)站的登錄注冊頁面都是很經(jīng)常用到的，今天只介紹一下用js來隨機(jī)生成驗(yàn)證碼的效果：

點(diǎn)擊圖中的“驗(yàn)證碼”任何一個(gè)位置，可以隨機(jī)生成下一個(gè)驗(yàn)證碼：

html+css:

js：