JavaScript Canvas實現驗證碼

在通常的登錄界面我們都可以看到驗證碼，驗證碼的作用是檢測是不是人在操作，防止機器等非人操作，防止數據庫被輕而易舉的攻破。

驗證碼一般用PHP和java等后端語言編寫。

但是在前端，用canva或者SVG也可以繪制驗證碼。

繪制驗證碼不能是簡單的隨機字符串，而應該在繪制界面有一些干擾項：

如：干擾線段、干擾圓點、背景等等。

這里的這個demo的canvas驗證碼干擾項比較簡單。

可以在圖示中看到本例中的干擾項。

canvas驗證碼展示效果：

點擊實現改變(重繪)驗證碼：

在控制臺運行函數輸出返回值(驗證碼)：

源碼 ：

輸出的文本。 // x 開始繪制文本的 x 坐標位置（相對于畫布）。 // y 開始繪制文本的 y 坐標位置（相對于畫布）。 // maxWidth 可選。允許的最大文本寬度，以像素計。 canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num); // 返回之前保存過的路徑狀態和屬性 ctx.restore(); str += char; } // console.log(str); return str; } /** * 繪制背景 * @param {[String]} canvasId [canvas的id] * @param {[Number]} canvasW [canvas的width] * @param {[Number]} canvasH [canvas的height] * @param {[Number]} min [下限] * @param {[Number]} max [上限] */ function drawBg(canvasId, canvasW, canvasH, min, max) { // 繪制canvas背景 canvasId.fillStyle = ranColor(min, max); // 填充顏色 canvasId.fillRect(0, 0, canvasW, canvasH); } /** * 繪制干擾 圓點 * @param {[String]} canvasId [canvas的id] * @param {[Number]} canvasW [canvas的width] * @param {[Number]} canvasH [canvas的height] * @param {[Number]} num [繪制的數量] * @param {[Number]} r [圓點半徑] * @param {[Number]} min [下限] * @param {[Number]} max [上線] */ function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) { for (var i = 0; i < num; i++) { // 開始繪制 （拿起筆） canvasId.beginPath(); // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （繪制） // x 圓的中心的 x 坐標。 // y 圓的中心的 y 坐標。 // r 圓的半徑。 // sAngle 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。 // eAngle 結束角，以弧度計。 // counterclockwise 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI); // 填充顏色 canvasId.fillStyle = ranColor(min, max); // 填充 canvasId.fill(); // 閉合繪制 （放開筆） canvasId.closePath(); } } /** * 繪制干擾 線段 * @param {[String]} canvasId [canvas的id] * @param {[Number]} canvasW [canvas的width] * @param {[Number]} canvasH [canvas的height] * @param {[Number]} num [繪制的數量] * @param {[Number]} min [下限] * @param {[Number]} max [上線] */ function drawLine(canvasId, canvasW, canvasH, num, min, max) { for (var i = 0; i < num; i++) { // 開始繪制 （拿起筆） canvasId.beginPath(); // 繪制開始點 canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH)); // 繪制結束點 canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH)); canvasId.strokeStyle = ranColor(min, max); canvasId.stroke(); canvasId.closePath(); } } // 繪制驗證碼 function drawCanvas() { // 清空canvas ctx.clearRect(0, 0, 200, 60); // 繪制背景 drawBg(ctx, ctxW, ctxH, 200, 255); // 繪制干擾圓點 drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255); // 繪制干擾線段 drawLine(ctx, ctxW, ctxH, 20, 0, 255); // 繪制驗證碼 var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100); return str; } drawCanvas(); document.getElementById('check').onclick = drawCanvas; </script> </body> </html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com