原生JavaScript實現(xiàn)簡單的圖形驗證碼

更新時間：2023年11月23日 08:22:41 作者：方苕愛吃瓜

這篇文章主要為大家詳細介紹了如何利用原生JavaScript實現(xiàn)簡單的圖形驗證碼,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以參考下

思路：此處假設驗證碼為4位隨機數(shù)值，數(shù)值刷新滿足兩個條件①頁面新進/刷新。②點擊圖片刷新。（實際情況下還要考慮登錄出錯刷新，此處只做樣式不寫進去）實現(xiàn)過程為1.先寫一個canvas標簽做繪圖容器。 → 2.將拿到的值繪制到容器中并寫好樣式。 → 3.點擊刷新重新繪制。

寫一個canvas標簽當容器

<canvas
    style="width: 100px;border: 2px solid rgb(60, 137, 209);background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');"
    id="captchaCanvas"></canvas>

并設置容器寬高背景顏色或圖片等樣式

寫一個數(shù)值繪制到canvas的方法

//text為傳遞的數(shù)值
function generateCaptcha(text, callback) {
      var canvas = document.getElementById('captchaCanvas');
      var ctx = canvas.getContext('2d');
      // 設置字體及大小
      ctx.font = '100px Comic Sans MS';
      // 設置字體顏色
      ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 調(diào)整文字圖形位置
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      // 調(diào)整陰影范圍
      ctx.shadowBlur = Math.random() * 20;
      // 調(diào)整陰影顏色
      ctx.shadowColor = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 調(diào)整陰影位置（偏移量）
      ctx.shadowOffsetX = Math.random() * 10;
      ctx.shadowOffsetY = Math.random() * 10;
      // 繪制文字圖形及其偏移量
      ctx.fillText(text, 25, 35);
      // 繪制文字邊框及其偏移量
      ctx.strokeText(text, Math.random() * 35, Math.random() * 45);

      var imgDataUrl = canvas.toDataURL();
      callback(imgDataUrl);

    }

拿到數(shù)值調(diào)用繪制方法

此處為樣式示例，因此數(shù)值我用4位隨機數(shù)表示，實際情況為你從后端取得的值，并依靠這個值在后端判斷驗證碼是否一致。

// 調(diào)用函數(shù)生成驗證碼并顯示在頁面上  
    generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });

監(jiān)聽標簽點擊實現(xiàn)點擊刷新

此處要注意一定要先清空canvas中已繪制圖像再渲染新數(shù)值，因此直接將清除范圍設置較大。

 // 監(jiān)聽點擊更新驗證碼
    document.getElementById("captchaCanvas").addEventListener("click", function (event) {
      // 清空畫布
      document.getElementById("captchaCanvas").getContext("2d").clearRect(0, 0, 9999, 9999);
      // 調(diào)用函數(shù)生成驗證碼并顯示在頁面上  
      generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
    })

最后實現(xiàn)效果：

完整代碼演示

<!DOCTYPE html>
<html>

<head>
  <title>String to Captcha</title>
</head>

<body>
  <canvas
    style="width: 100px;border: 2px solid rgb(60, 137, 209);background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');"
    id="captchaCanvas"></canvas>


  <script>
    // 監(jiān)聽點擊更新驗證碼
    document.getElementById("captchaCanvas").addEventListener("click", function (event) {
      // 清空畫布
      document.getElementById("captchaCanvas").getContext("2d").clearRect(0, 0, 9999, 9999);
      // 調(diào)用函數(shù)生成驗證碼并顯示在頁面上  
      generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
    })

    function generateCaptcha(text, callback) {
      var canvas = document.getElementById('captchaCanvas');
      var ctx = canvas.getContext('2d');
      // 設置字體及大小
      ctx.font = '100px Comic Sans MS';
      // 設置字體顏色
      ctx.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 調(diào)整文字圖形位置
      ctx.textAlign = 'left';
      ctx.textBaseline = 'top';
      // 調(diào)整陰影范圍
      ctx.shadowBlur = Math.random() * 20;
      // 調(diào)整陰影顏色
      ctx.shadowColor = 'rgb(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ')';
      // 調(diào)整陰影位置（偏移量）
      ctx.shadowOffsetX = Math.random() * 10;
      ctx.shadowOffsetY = Math.random() * 10;
      // 繪制文字圖形及其偏移量
      ctx.fillText(text, 25, 35);
      // 繪制文字邊框及其偏移量
      ctx.strokeText(text, Math.random() * 35, Math.random() * 45);

      var imgDataUrl = canvas.toDataURL();
      callback(imgDataUrl);

    }

    // 調(diào)用函數(shù)生成驗證碼并顯示在頁面上  
    generateCaptcha(Math.floor(Math.random() * 9000) + 1000, function (imgDataUrl) { });
  </script>
</body>

</html>

到此這篇關于原生JavaScript實現(xiàn)簡單的圖形驗證碼的文章就介紹到這了,更多相關JavaScript圖形驗證碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: