JavaScript中怎么生成隨機(jī)驗(yàn)證碼

發(fā)布時(shí)間：2021-06-17 17:04:34 來(lái)源：億速云閱讀：170 作者：Leah 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中怎么生成隨機(jī)驗(yàn)證碼，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

利用canvas制作一個(gè)隨機(jī)驗(yàn)證碼：

　　1、clearRect：context.clearRect(x,y,width,height);清空給定矩形內(nèi)的指定像素

　　2、fillStyle：設(shè)置畫(huà)筆的顏色

　　3、rotate(deg)：旋轉(zhuǎn)角度，以弧度旋轉(zhuǎn)(弧度=degrees*Math.PI/180 )

　　4、translate()：方法重新映射畫(huà)布上的位置　　

　　5、Math.random()：獲取0-1之間的一個(gè)隨機(jī)數(shù)，不包含1

JavaScript中怎么生成隨機(jī)驗(yàn)證碼

<!-- HTML -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>canvas隨機(jī)驗(yàn)證碼</title>
  </head>
  <body>
    <canvas id="canvas" width="100" height="40" ></canvas>
  </body>
  <script type="text/javascript">
    var myCanvas = document.querySelector("#canvas");
    var blur = myCanvas.getContext("2d");
    // 當(dāng)點(diǎn)擊畫(huà)布時(shí)創(chuàng)建一個(gè)新的路徑
    // 驗(yàn)證碼封裝
    myCanvas.onclick = function() {
      // 實(shí)現(xiàn)點(diǎn)擊畫(huà)布創(chuàng)建一個(gè)新的驗(yàn)證碼
      blur.clearRect(0,0,100,40);
      verify();
    }
    verify();
    function verify() {
      // 繪制矩形框
      // blur.strokeRect(0,0,100,40);
      // 隨機(jī)驗(yàn)證碼
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "s", "t", "u",
        "v", "w", "x", "y", "z", "A", "B", "C", "D", "F", "G", "H", "I", "J", "K", "L", "S", "T", "U", "V", "W", "X", "Y",
        "Z"
      ];
      // 顯示四位數(shù)的驗(yàn)證碼
      for (var i = 0; i < 4; i++) {
        var x = 20 + 20 * i;
        var y = 20 + 10 * Math.random();
        // console.log(x,y);
        // 在數(shù)組中獲取到隨機(jī)的索引整數(shù)
        var index = Math.floor(Math.random() * arr.length);
        // 通過(guò)隨機(jī)的索引獲取到隨機(jī)的元素
        var texts = arr[index];
        // 設(shè)置驗(yàn)證碼的相關(guān)樣式
        blur.font = "bold 20px 微軟雅黑";
        blur.fillStyle = textColor();
        // 畫(huà)布旋轉(zhuǎn)顯示
        // translate() 方法重新映射畫(huà)布上的位置
        blur.translate(x, y);
        // 將畫(huà)布旋轉(zhuǎn)，旋轉(zhuǎn)角度，以弧度旋轉(zhuǎn)(弧度=degrees*Math.PI/180 )
        var deg = 90 * Math.random() * Math.PI / 180;
        blur.rotate(deg); //
        blur.fillText(texts, 0, 0);
        // 將畫(huà)布映射返回原來(lái)的位置
        blur.rotate(-deg);
        blur.translate(-x, -y);
      }
      
      // 制作驗(yàn)證碼的干擾線制作
      for(var i=0;i<6;i++){
        blur.beginPath();
        blur.moveTo(Math.random()*100,Math.random()*40);
        blur.lineTo(Math.random()*100,Math.random()*40);
        // 設(shè)置干擾線的顏色
        blur.strokeStyle=textColor();
        blur.stroke();
      }
      // 制作驗(yàn)證碼的干擾圓點(diǎn)
      for(var i=0;i<20;i++){
        blur.beginPath();
        var x=Math.random()*100;
        var y=Math.random()*100;
        blur.moveTo(x,y);
        blur.lineTo(x+1,y+1);
        // 設(shè)置干擾線的顏色
        blur.strokeStyle=textColor();
        blur.stroke();
      }
    }
    // 獲取隨機(jī)顏色封裝
    function textColor(){
      var red=Math.floor(Math.random()*256);
      var green=Math.floor(Math.random()*256);
      var blue=Math.floor(Math.random()*256);
      return "rgb("+red+","+green+","+blue+")";
    }
  </script>
</html>

x	要清除的矩形左上角的 x 坐標(biāo)
y	要清除的矩形左上角的 y 坐標(biāo)
width	要清除的矩形的寬度，以像素計(jì)
height	要清除的矩形的高度，以像素計(jì)

關(guān)于JavaScript中怎么生成隨機(jī)驗(yàn)證碼就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

JavaScript中怎么生成隨機(jī)驗(yàn)證碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽