在網站登錄、注冊等場景中，我們經常需要驗證用戶輸入的有效性。常見的一種驗證方式是生成驗證碼圖片，要求用戶輸入顯示在圖片上的驗證碼才能進行下一步操作。

使用 Javascript 可以方便地實現驗證碼圖片的生成。下面通過一個例子來演示如何使用 Javascript 生成驗證碼圖片：

<canvas id="canvas" width="100" height="50"></canvas>
<button onclick="generateCode()">生成驗證碼</button>
<input type="text" id="inputCode">
<button onclick="validateCode()">驗證</button>
<script>
var code;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function generateCode() {
code = "";
var codeLength = 4; //驗證碼長度
var codeChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; //驗證碼字符集
for (var i = 0; i< codeLength; i++) {
var charIndex = Math.floor(Math.random() * codeChars.length);
code += codeChars[charIndex];
}
drawCode();
}
function drawCode() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = "30px Arial";
context.fillText(code, 25, 35); //繪制驗證碼
}
function validateCode() {
var input = document.getElementById('inputCode').value;
if (input === code) {
alert('驗證碼正確');
} else {
alert('驗證碼錯誤');
}
}
</script>

上面的代碼包含了一個用 Canvas 繪制驗證碼圖片的完整實現。先在 HTML 中定義一個用于顯示驗證碼的 Canvas 元素，并綁定兩個按鈕的點擊事件。

在 JavaScript 中，定義了三個函數：generateCode、drawCode 和 validateCode，分別用于生成驗證碼、繪制驗證碼，以及驗證用戶輸入的驗證碼是否正確。

generateCode 函數首先將驗證碼長度和字符集定義好，然后用循環方式隨機生成 codeLength 個字符，并拼接成完整的驗證碼字符串。注意，代碼中使用 Math.random 函數來隨機生成字符序號，Math.floor 函數用于向下取整。

接著在 drawCode 函數中，調用 Canvas 的 clearRect 方法清空畫布，設置字體大小和顏色，然后調用 fillText 方法將驗證碼繪制在 Canvas 上。

最后，在 validateCode 函數中，獲取用戶輸入的驗證碼，與之前生成的驗證碼進行比對，如果相同則彈出正確提示，否則彈出錯誤提示。

整個過程有點類似于人為繪制驗證碼圖片的過程，只不過使用了 JavaScript 自動化實現。

除了 Canvas，還可以使用 CSS3 的背景漸變和旋轉等樣式，將驗證碼樣式制作得更加豐富多彩。這里只列出一個示例：

<div id="code">
<span class="rotate">1</span>
<span class="gradient">2</span>
<span class="rotate">3</span>
<span class="gradient">4</span>
<span class="rotate">5</span>
<span class="gradient">6</span>
</div>
<button onclick="generateCode()">生成驗證碼</button>
<input type="text" id="inputCode">
<button onclick="validateCode()">驗證</button>
<style>
#code {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
#code span {
margin: 0 5px;
font-size: 30px;
}
.rotate {
transform: rotate(8deg);
}
.gradient {
background: linear-gradient(to right, #ff6666, #ffcc66);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<script>
var code;
function generateCode() {
code = "";
var codeLength = 4; //驗證碼長度
var codeChars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; //驗證碼字符集
for (var i = 0; i< codeLength; i++) {
var charIndex = Math.floor(Math.random() * codeChars.length);
code += codeChars[charIndex];
}
drawCode();
}
function drawCode() {
var codeDiv = document.getElementById('code');
var spanList = codeDiv.getElementsByTagName('span');
for (var i = 0; i< spanList.length; i++) {
var span = spanList[i];
span.className = (i % 2 === 0 ? 'rotate' : 'gradient');
span.textContent = code.charAt(i);
}
}
function validateCode() {
var input = document.getElementById('inputCode').value;
if (input === code) {
alert('驗證碼正確');
} else {
alert('驗證碼錯誤');
}
}
</script>

在這個示例中，使用一個 div 容器包含了多個 span 元素，每個 span 元素顯示一個字符。接著使用 CSS3 的 transform 屬性為偶數位置的字符元素添加旋轉效果，使用 linear-gradient 屬性為奇數位置的字符元素添加背景漸變效果。

在繪制驗證碼時，只需獲取所有的 span 元素，按照驗證碼字符串的順序對 span 元素進行樣式設置和字符填充即可。

這種方式相比 Canvas 更加簡單、易于實現，也更易于使用 CSS 精細調整驗證碼的樣式。