前端生成(PC/移動端)驗證碼

先看看效果：

 

第一步：使用canvas標籤，給canvas添加一個id

<canvas id="canvasVCode" width="40" height="22" class="captcha" @click="changeVCode"></canvas>

第二步：在頁面加載完畢後調用

 點擊驗證碼，重新更新驗證碼：

methods: {
    // 重新獲取驗證碼
    changeVCode() {
        this.VCode = setVCode("canvasVCode")
    }
}

第三步：setVcode方法引用，新建一個utils/utils.js文件

/**
 * 
 * @param {*} canvasId canvasId
 * @returns 返回小寫字符串驗證碼
 */
export const setVCode = (canvasId) => {
  //驗證碼生成
  let canvas = document.getElementById(canvasId)//畫布對象
  let show_num = [] // 裝驗證碼的數組
  //產生隨機顏色
  function randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ") "
  }
  //畫布
  function draw(show_num) {
    let canvas_clientWidth = document.getElementById(canvasId).clientWidth//畫布長度
    let canvas_clientHeight = document.getElementById(canvasId).clientHeight//畫布高度
    let context = canvas.getContext("2d")//畫布環境 創建 context 對象：
    canvas.width = canvas_clientWidth
    canvas.height = canvas_clientHeight
    let str = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
    let astr = str.split(',');//分割字符串形成數組
    let sLength = astr.length;//數組長度
    for (let i = 0; i <= 3; i++) {
      let j = Math.floor(Math.random() * sLength);//隨機索引
      let deg = Math.random() * 30 * Math.PI / 180;//0-30隨機弧度
      let text = astr[j];//隨機字符
      show_num[i] = text//驗證碼字符數組
      let x = 10 + i * 20//x座標
      let y = 20 + Math.random() * 8//y座標
      //位移 旋轉角度 顏色 文字 樣式開始位置
      context.font = 'bold 23px 微軟雅黑'
      context.translate(x, y);
      context.rotate(deg);
      context.fillStyle = randomColor();
      context.fillText(text, 0, 0)
      context.rotate(-deg)
      context.translate(-x, -y)
    }
    //驗證碼顯示小點
    for (let i = 0; i <= 30; i++) {
      context.strokeStyle = randomColor()//設置隨機色用小點的顏色
      context.beginPath();//開始一條路徑
      let m = Math.random() * canvas_clientWidth;
      let n = Math.random() * canvas_clientHeight;
      context.moveTo(m, n)//移動
      context.lineTo(m + 1, n + 1);//添加一個新點，然後在畫布中創建從該點到最後指定點的線條
      context.stroke();//畫上面定義好的路徑
    }
    //驗證碼顯示線條
    for (let i = 0; i < 8; i++) {
      context.strokeStyle = randomColor()
      context.beginPath()
      context.moveTo(Math.random() * canvas_clientWidth, Math.random() * canvas_clientHeight);
      context.lineTo(Math.random() * canvas_clientWidth, Math.random() * canvas_clientHeight)
      context.stroke()
    }
  }
  draw(show_num)
  // 拼成字符串
  // 轉小寫
  let lowercaseVCode = show_num.join("").toLocaleLowerCase()
  return lowercaseVCode
};

完成