驗證碼
Capture_1.mp4影片功能說明：
1.驗證碼看不清楚可按鈕重新產生。
2.驗證碼錯誤時，刷新驗證碼。
3.驗證碼正確，但是帳號不存在。
4.驗證碼正確，帳號存在、但是密碼不正確。
5.驗證碼正確、帳號存在、密碼正確。
0與O、數字1與小寫字母l、大寫字母i，容易造成使用者混淆，來源字串中應移除。
以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>
<div align="center">
<h1>canvas驗證碼+線條</h1>
<canvas id="captchaCanvas" width="200" height="80"></canvas><br>
<button id="regenerate">看不清楚，重新產生一張</button><br>
<label id="hiddenCaptcha"></label><br>
<input type="text" id="inputchaptcha">
</div>
<script>
// 生成隨機字元
function getRandomCharacter() {
const characters = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz';
return characters[Math.floor(Math.random() * characters.length)];
}
// 生成隨機顏色
function getRandomColor(usedColors) {
const letters = '0123456789ABCDEF';
let color;
do {
color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
} while (usedColors.includes(color)); // 檢查是否已經使用過
usedColors.push(color);
return color;
}
// 生成隨機線條
function drawRandomLines(context, numLines, usedColors) {
for (let i = 0; i < numLines; i++) {
context.beginPath();
context.moveTo(getRandomNumber(0, 200), getRandomNumber(0, 80));
context.lineTo(getRandomNumber(0, 200), getRandomNumber(0, 80));
context.strokeStyle = getRandomColor(usedColors); // 使用隨機顏色
context.stroke();
}
}
// 生成隨機數字
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成驗證碼
function generateCaptcha() {
const canvas = document.getElementById('captchaCanvas');
const context = canvas.getContext('2d');
const usedColors = []; // 用於存儲已使用的顏色
// 清空畫布
context.clearRect(0, 0, canvas.width, canvas.height);
// 生成隨機線條
drawRandomLines(context, 50, usedColors);
// 生成隨機字元
const captchaText = Array.from({ length: 5 }, getRandomCharacter).join('');
document.getElementById("hiddenCaptcha").textContent = captchaText;
// 設定字體和大小
context.font = '30px Arial';
context.fillStyle = getRandomColor(usedColors); // 使用隨機顏色
context.textAlign = 'center';
context.textBaseline = 'middle';
// 在畫布上繪製文字
context.fillText(captchaText, canvas.width / 2, canvas.height / 2);
}
// 初始化驗證碼
generateCaptcha();
// 添加點擊事件，點擊時重新生成驗證碼
document.getElementById('regenerate').addEventListener('click', function () {
generateCaptcha();
});
</script>
</body>
</html>
參考文獻
w3schools.com: https://www.w3schools.com/tags/ref_canvas.asp
Canvas fillText ，ctx文字風格：https://ithelp.ithome.com.tw/articles/10294336?sc=pt