驗證碼

使用畫布 canvas

Capture_1.mp4

以JavaScript繪圖庫寫出網頁5碼驗證碼 --- 使用 canvas 標記語法

canvas屬性設定：https://ithelp.ithome.com.tw/articles/10236581

在javascript內操作，常用屬性如下：

ctx.font = "24px Arial"; //字體大小與字型

ctx.fillStyle = "red"; //字的顏色，亦可十六進位FF0000、rgb(255,0,0)、rgba(255,0,0,1)

<!DOCTYPE html>

<html>

<head>

<title>網頁驗證碼</title>

<style>

#captchaCanvas {

border: 1px solid black;

}

</style>

</head>

<body>

<br>

// 產生驗證碼

function generateCaptcha() {

var canvas = document.getElementById('captchaCanvas');

var ctx = canvas.getContext('2d');

// 清除畫布

ctx.clearRect(0, 0, canvas.width, canvas.height);

var captcha = '';

var captchaLength = 5; // 驗證碼長度

// 產生4位數字驗證碼

for (var i = 0; i < captchaLength; i++) {

var digit = Math.floor(Math.random() * 10);

captcha += digit;

// 繪製每個數字

var x = 38 - captchaLength*5 + i * 30; // 每個數字的x座標

var y = 25; // 數字的y座標

ctx.font = '24px Arial';

ctx.fillText(digit, x, y);

}

// 將驗證碼存儲在隱藏欄位中

document.getElementById('hiddenCaptcha').value = captcha;

}

// 驗證使用者輸入

function checkCaptcha() {

var userCaptcha = document.getElementById('captchaInput').value;

var captchaInput = document.getElementById('hiddenCaptcha');

if (userCaptcha === captchaInput.value) {

document.getElementById('result').textContent = "驗證碼正確！";

//alert('驗證碼正確！'); // 驗證成功

} else {

document.getElementById('result').textContent = "驗證碼錯誤！";

//alert('驗證碼錯誤！'); // 驗證失敗

generateCaptcha(); // 重新產生驗證碼

}

// 初始化頁面時產生驗證碼

window.onload = function() {

generateCaptcha();

};

</script>

</body>

</html>

// 字體設定：正體/斜體首字是否要放大字重字體大小字型

ctx.font = "italic small-caps 800 50px monospace";

參考文獻

w3schools.com: https://www.w3schools.com/tags/ref_canvas.asp

Canvas fillText ，ctx文字風格：https://ithelp.ithome.com.tw/articles/10294336?sc=pt