Vueプロジェクトがグラフィック検証コードを実装

<テンプレート>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: "SIdentify",
  小道具: {
    識別コード:
      タイプ: 文字列、
      デフォルト: "1234"
    },
    フォントサイズ最小: {
      タイプ: 数値、
      デフォルト: 35
    },
    フォントサイズ最大: {
      タイプ: 数値、
      デフォルト: 35
    },
    背景色最小: {
      タイプ: 数値、
      デフォルト: 180
    },
    背景色最大: {
      タイプ: 数値、
      デフォルト: 240
    },
    色最小:
      タイプ: 数値、
      デフォルト: 50
    },
    色最大値: {
      タイプ: 数値、
      デフォルト: 160
    },
    ラインカラー最小: {
      タイプ: 数値、
      デフォルト: 100
    },
    ラインカラー最大: {
      タイプ: 数値、
      デフォルト: 200
    },
    ドットカラー最小: {
      タイプ: 数値、
      デフォルト: 0
    },
    ドットカラーマックス: {
      タイプ: 数値、
      デフォルト: 255
    },
    コンテンツ幅: {
      タイプ: 数値、
      デフォルト: 120
    },
    コンテンツの高さ: {
      タイプ: 数値、
      デフォルト: 40
    }
  },
  メソッド: {
    // 乱数を生成する randomNum(min, max) {
      Math.floor(Math.random() * (max - min) + min) を返します。
    },
    // ランダムな色を生成する randomColor(min, max) {
      r = this.randomNum(min, max); とします。
      g = this.randomNum(min, max); とします。
      b = this.randomNum(min, max) とします。
      "rgb(" + r + "," + g + "," + b + ")" を返します。
    },
    透明（） {
      "rgb(255,255,255)"を返します。
    },
    描画画像() {
      キャンバスを document.getElementById("s-canvas");
      ctx = canvas.getContext("2d"); とします。
      ctx.textBaseline = "下";
      // 背景を描画します // ctx.fillStyle = this.randomColor(
      // this.backgroundColorMin、
      // this.backgroundColorMax
      // );
      ctx.fillStyle = this.transparent();
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
      // テキストを描画する for (let i = 0; i < this.identifyCode.length; i++) {
        this.drawText(ctx, this.identifyCode[i], i);
      }
      // this.drawLine(ctx)
      // this.drawDot(ctx)
    },
    テキストを描画します(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
      ctx.フォント =
        this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
      x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) とします。
      y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) とします。
      var deg = this.randomNum(-10, 10);
      // 座標の原点と回転角度を変更します ctx.translate(x, y);
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      // 座標原点と回転角度を復元します ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    描画線(ctx) {
      // 干渉線を描く for (let i = 0; i < 8; i++) {
        ctx.strokeStyle = this.randomColor(
          this.lineColorMin、
          this.lineColorMax
        );
        ctx.beginPath();
        ctx.moveTo() 関数は、
          this.randomNum(0, this.contentWidth)、
          this.randomNum(0, this.contentHeight)
        );
        ctx.lineTo() 関数は、
          this.randomNum(0, this.contentWidth)、
          this.randomNum(0, this.contentHeight)
        );
        ctx.stroke();
      }
    },
    描画ドット(ctx) {
      // 干渉点を描画する for (let i = 0; i < 100; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(
          this.randomNum(0, this.contentWidth)、
          this.randomNum(0, this.contentHeight)、
          1、
          0,
          2 * 数学.PI
        );
        ctx.fill();
      }
    }
  },
  時計：
    識別コード() {
      このメソッドは、次のコードで実行されます。
    }
  },
  マウント() {
    このメソッドは、次のコードで実行されます。
  }
};
</スクリプト>

<テンプレート>
<div class="get-code" @click="refreshCode()">
    <s-identify :identifyCode="identifyCode"></s-identify>
</div>
</テンプレート>
<スクリプト>
    "@/components/sIdentify.vue" から SIdentify をインポートします。
    エクスポートデフォルト{
        コンポーネント: { SIdentify },
        データ（） {
           戻る {
                識別コード: "",
                identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ", // 入力するだけです}
        },
        メソッド: {            
           リフレッシュコード（）{//
             this.identifyCode = "";
             this.makeCode(this.identifyCodes,4);
           },
           ランダム数 (最小, 最大) {
             最大値 = 最大値 + 1
             Math.floor(Math.random() * (max - min) + min) を返します。
           },
           // 検証コードをランダムに生成する string makeCode (data, len) {
             (i = 0; i < len; i++) の場合 {
             this.identifyCode += data[this.randomNum(0, data.length - 1)]
           }
        }
    }
</スクリプト>