vue-swiper的使用教程

時間 2019-11-13

標籤 vue swiper 使用教程简体版

原文原文鏈接

在一般的登陸界面咱們均可以看到驗證碼，驗證碼的做用是檢測是否是人在操做，防止機器等非人操做，防止數據庫被垂手可得的攻破。html

驗證碼通常用PHP和java等後端語言編寫。前端

可是在前端，用canva或者SVG也能夠繪製驗證碼。java

繪製驗證碼不能是簡單的隨機字符串，而應該在繪製界面有一些干擾項：數據庫

如：干擾線段、干擾圓點、背景等等。canvas

這裏的這個demo的canvas驗證碼干擾項比較簡單。後端

能夠在圖示中看到本例中的干擾項。數組

canvas驗證碼展現效果：瀏覽器

點擊實現改變(重繪)驗證碼：dom

在控制檯運行函數輸出返回值(驗證碼)：函數

源碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas驗證碼</title>
</head>
 
<body>
 <canvas width="200" height="60" id="check" style="border:1px solid #000;">您的瀏覽器不支持canvas標籤！</canvas>
 <script>
  var ctx = document.getElementById("check").getContext("2d");
  var ctxW = document.getElementById("check").clientWidth;
  var ctxH = document.getElementById("check").clientHeight;
 
  /**
   * 產生一個隨機數 可設置隨機數區間
   * @param {[Number]} min [隨機數區間下限]
   * @param {[Number]} max [隨機數區間上限]
   * @return {[Number]}  [返回一個在此區間的隨機數]
   */
  function ranNum(min, max) {
 
   return Math.random() * (max - min) + min;
  //  前端全棧開發學習交流圈：866109386
  }//面向1-3年經驗前端人員
 //幫助突破技術瓶頸，提高思惟能力
  /**
   * 返回一個隨機顏色 可設置顏色區間
   * @param {[Number]} min [顏色下限]
   * @param {[Number]} max [顏色上限]
   * @return {[String]}  [隨機顏色]
   */
  function ranColor(min, max) {
 
   var r = ranNum(min, max);
 
   var g = ranNum(min, max);
 
   var b = ranNum(min, max);
 
   // return "rgb(" + r + "," + g + "," + b + ")";
   return `rgb(${r},${g},${b})`;
 
  }
 
  /**
   * 隨機字符串數組
   * @return {[Array]} [隨機數組]
   */
  function ranStr() {
 
   var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
 
   return str.split("").sort(function () {
    return Math.random() - 0.5
   });
 
  }
 
  /**
   * 繪製文本字符串
   * @param {[String]} canvasId [canvas的id]
   * @param {[Number]} canvasW [canvas的width]
   * @param {[Number]} canvasH [canvas的height]
   * @param {[Number]} num  [繪製驗證碼的字數]
   * @param {[Number]} fsMin [字體大小下限]
   * @param {[Number]} fsMax [字體大小上限]
   * @param {[Number]} frMin [字體旋轉偏移下限]
   * @param {[Number]} frMax [字體旋轉偏移上限]
   * @param {[Number]} min  [顏色下限]
   * @param {[Number]} max  [顏色上限]
   * @return {[String]} [隨機字符串]
   */
  function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {
 
   var str = "";
 
   for (var i = 0; i < num; i++) {
 
    var char = ranStr()[Math.floor(0, ranStr().length)];
 
    var fs = ranNum(fsMin, fsMax);
 
    canvasId.font = fs + "px Verdana";
 
    canvasId.fillStyle = ranColor(min, max);
 
    // 保存繪製的狀態
    canvasId.save();
 
    // context.translate(x,y);
    // x 添加到水平座標（x）上的值
    // y 添加到垂直座標（y）上的值
    // 偏移
    canvasId.translate(canvasW / num * i + canvasW / 20, 0);
 
    // 變換角度
    canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
 
    // context.fillText(text,x,y,maxWidth);
    // text 規定在畫布上輸出的文本。
    // x 開始繪製文本的 x 座標位置（相對於畫布）。
    // y 開始繪製文本的 y 座標位置（相對於畫布）。
    // maxWidth 可選。容許的最大文本寬度，以像素計。
    canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);
 
    // 返回以前保存過的路徑狀態和屬性
    ctx.restore();
 
    str += char;
 
   }
 
   // console.log(str);
   return str;
 
  }
 
  /**
   * 繪製背景
   * @param {[String]} canvasId [canvas的id]
   * @param {[Number]} canvasW [canvas的width]
   * @param {[Number]} canvasH [canvas的height]
   * @param {[Number]} min  [下限]
   * @param {[Number]} max  [上限]
   */
  function drawBg(canvasId, canvasW, canvasH, min, max) {
 
   // 繪製canvas背景
   canvasId.fillStyle = ranColor(min, max);
 
   // 填充顏色
   canvasId.fillRect(0, 0, canvasW, canvasH);
 
  }
 
  /**
   * 繪製干擾 圓點
   * @param {[String]} canvasId [canvas的id]
   * @param {[Number]} canvasW [canvas的width]
   * @param {[Number]} canvasH [canvas的height]
   * @param {[Number]} num  [繪製的數量]
   * @param {[Number]} r  [圓點半徑]
   * @param {[Number]} min  [下限]
   * @param {[Number]} max  [上線]
   */
  function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {
 
   for (var i = 0; i < num; i++) {
 
    // 開始繪製 （拿起筆）
    canvasId.beginPath();
 
    // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （繪製）
    // x 圓的中心的 x 座標。
    // y 圓的中心的 y 座標。
    // r 圓的半徑。
    // sAngle 起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
    // eAngle 結束角，以弧度計。
    // counterclockwise 可選。規定應該逆時針仍是順時針繪圖。False = 順時針，true = 逆時針。
    canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);
 
    // 填充顏色
    canvasId.fillStyle = ranColor(min, max);
 
    // 填充
    canvasId.fill();
 
    // 閉合繪製 （放開筆）
    canvasId.closePath();
 
   }
 
  }
 
  /**
   * 繪製干擾 線段
   * @param {[String]} canvasId [canvas的id]
   * @param {[Number]} canvasW [canvas的width]
   * @param {[Number]} canvasH [canvas的height]
   * @param {[Number]} num  [繪製的數量]
   * @param {[Number]} min  [下限]
   * @param {[Number]} max  [上線]
   */
  function drawLine(canvasId, canvasW, canvasH, num, min, max) {
 
   for (var i = 0; i < num; i++) {
 
    // 開始繪製 （拿起筆）
    canvasId.beginPath();
 
    // 繪製開始點
    canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
 
    // 繪製結束點
    canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
 
    canvasId.strokeStyle = ranColor(min, max);
 
    canvasId.stroke();
 
    canvasId.closePath();
 
   }
 
  }
 
  // 繪製驗證碼
  function drawCanvas() {
 
   // 清空canvas
   ctx.clearRect(0, 0, 200, 60);
 
   // 繪製背景
   drawBg(ctx, ctxW, ctxH, 200, 255);
 
   // 繪製干擾圓點
   drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
 
   // 繪製干擾線段
   drawLine(ctx, ctxW, ctxH, 20, 0, 255);
 
   // 繪製驗證碼
   var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
 
   return str;
 
  }
 
  drawCanvas();
 
  document.getElementById('check').onclick = drawCanvas;
 </script>
</body>
 
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。