整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
網頁設計中，尤其表單填寫提交過程中，為防止機器自動登錄，很多網頁都采用驗證碼技術，允許用戶輸入而盡量避免自動登錄。驗證碼實現的方法有很多，PHP繪圖技術可以在服務端生成驗證碼并發送客戶端，HTML5技術下可以使用canvas與JS腳本實現在客戶端瀏覽器自動生成驗證碼。本文給出JS+Canvas驗證碼的解決措施，所制作驗證碼實現效果如下圖所示：
驗證碼實現效果動態圖
本例驗證碼的實現主要包括驗證碼字符串的生成、背景干擾點實現及干擾直線的生成三部分。最終通過canvas繪圖技術將生成的驗證碼字符串、背景及干擾直線顯示到畫布上。主要涉及技術或知識點包括canvas繪圖技術、數組、鼠標點擊事件、隨機函數等。以下從驗證字符串、背景干擾點及干擾直線三方面對實現過程進行說明。
驗證字符串部分主要借助數組存儲驗證碼所有字符，通過調用Math對象的隨機函數獲取數組下標，并通過數組下表讀取數組元素，將讀取的數組元素組裝成完整字符串。其實現核心代碼如下：
驗證字符串獲取核心代碼
如上圖所示，本例驗證碼字符包括數字與大寫字母，getCode函數返回值即為4位驗證碼字符串。
背景干擾點可以直接使用canvas對應的繪圖方法進行繪制，本例為簡化開發過程，降低難度直接使用drawImage繪圖方式加載背景圖片，實現干擾點效果。背景圖片如下：
背景干擾點圖片
通過調用drawImage方法，指定截取的坐標位置參數，可實現背景干擾點的動態變化效果，背景干擾點實現核心代碼如下：
背景干擾點實現代碼
其中getXsize與getYsize為獲取繪圖截取背景圖片的坐標位置，通過使用隨機函數實現從背景圖片不同位置截取進行繪圖輸出。
干擾直線實現較為簡單，直接通過JS提供的moveTo與lineTo方法完成直線的繪制，本例繪制了兩條直線，一條為黑色干擾線，一條為白色干擾線。在繪制過程兩端點需要使用Math隨機函數生成符合條件隨機坐標。干擾直線相關實現代碼如下：
干擾直線實現核心代碼
干擾直線實現核心代碼如上圖，其中getLsize方法主要用于獲取隨機端點Y軸坐標值。strokeStyle主要用于設置繪圖直線的顏色。
驗證碼的顯示輸出主要使用fillText()方法在canvas指定位置進行文字輸出，本例使用第三方ttf字體，因此在HTML頁面中對字體進行了加載。驗證碼顯示輸出實現代碼如下：
驗證碼繪制
驗證碼顯示輸出核心代碼如上圖所示，其中myfont為加載的第三方字體。
繪圖基礎部分主要包括前端canvas元素的布局等。包括屬性的設置，js部分元素的獲取及屬性設置等。
我們一般接觸的驗證碼，都可以點擊圖片實現驗證碼的刷新，因此本例為canvas標記添加了onclick事件，將所有驗證碼生成的代碼封裝到showCode()函數中，通過調用showCode函數實現驗證碼的刷新。本例完整JS腳本部分代碼如下：
JS實現腳本代碼
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：
證碼在很多網站的登錄注冊頁面都是很經常用到的，今天只介紹一下用js來隨機生成驗證碼的效果：
點擊圖中的“驗證碼”任何一個位置，可以隨機生成下一個驗證碼：
html+css:
js：
天在小破站看到一個前端生成隨機驗證碼的視頻，感覺很有意思，就跟著操作了一下，成功了。
后來自己又想給它加一個提交按鈕，輸入并判斷驗證碼的正確性，也可以正常運行，但是我的代碼好像還是存在一些bug：
1.canvas標簽是繪圖容器，自帶屬性使它是一個默認300*150的容器，縮小canvs容器時，里面的繪圖也會變小，我沒有找到合適的方法去調整它的大小。
2.對于輸入框input，我使用了float浮動，為了使input輸入框和canvas里面的驗證碼并排，但是被vscode警告了。
這次的實戰練習也經歷了很多坎坷，但是也收獲很大。學習到了canvas標簽的用法、JS全局變量和局部變量、以及有關context的一些屬性和方法。
最后，希望路過的大佬，幫我看看bug，幫幫菜鳥。
附上源碼
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
