JavaScript

驗證碼

javascript

ctx.font = 'italic 24px Verdana';

html

<input type="hidden" id="hiddenCaptcha">

<canvas id="captchaCanvas" width="230" height="100"></canvas>

font width height

 48 230 100

 24 100 60

產生5碼不含0與大小寫字母Oo的範例

function generateCaptcha() {

  var characters = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz';

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

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

  // 清除畫布

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

  var captcha = '';

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

  // 產生5位數字驗證碼

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

    var index = Math.floor(Math.random() * characters.length);

    var digit = characters.charAt(index);

    captcha += digit;

    // 繪製每個數字

    var x = 10 + i * 43; // 每個數字的x座標

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

    ctx.font = 'italic 24px Verdana'; //斜體字、大小、字型

    ctx.fillStyle = "#351CA5";

    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('message').textContent = "驗證碼正確！";

        document.getElementById('checkPass').value = "Passed";

      } else {

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

        document.getElementById('result').textContent = "";

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

        document.getElementById('checkPass').value = "Failed";

      }

    }