Vueはグラフィック検証コードを実装する

<テンプレート>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: 'SIdentify',
    小道具: {
      識別コード:
        タイプ: 文字列、
        デフォルト: '1234'
      },
      フォントサイズ最小: {
        タイプ: 数値、
        デフォルト: 18
      },
      フォントサイズ最大: {
        タイプ: 数値、
        デフォルト: 40
      },
      背景色最小: {
        タイプ: 数値、
        デフォルト: 180
      },
      背景色最大: {
        タイプ: 数値、
        デフォルト: 240
      },
      色最小:
        タイプ: 数値、
        デフォルト: 50
      },
      色最大値: {
        タイプ: 数値、
        デフォルト: 160
      },
      ラインカラー最小: {
        タイプ: 数値、
        デフォルト: 40
      },
      ラインカラー最大: {
        タイプ: 数値、
        デフォルト: 180
      },
      ドットカラー最小: {
        タイプ: 数値、
        デフォルト: 0
      },
      ドットカラーマックス: {
        タイプ: 数値、
        デフォルト: 255
      },
      コンテンツ幅: {
        タイプ: 数値、
        デフォルト: 111
      },
      コンテンツの高さ: {
        タイプ: 数値、
        デフォルト: 38
      }
    },
    メソッド: {
      // 乱数を生成する randomNum(min, max) {
        Math.floor(Math.random() * (max - min) + min) を返します。
      },
      // ランダムな色を生成する randomColor(min, max) {
        r = this.randomNum(最小値, 最大値) とします。
        g = this.randomNum(min, max) とします。
        b = this.randomNum(最小値, 最大値) とします。
        'rgb(' + r + ',' + g + ',' + b + ')' を返します
      },
      描画画像() {
        キャンバス = document.getElementById('s-canvas') とします。
        ctx = canvas.getContext('2d') とします。
        ctx.textBaseline = '下'
        // 背景を描画します ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
        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) // 干渉点を描画},
      // テキストを描画する drawText(ctx, txt, i) {
        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
        ctx.font = 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(-30, 30) // 文字の回転角度（45度以下が望ましい）
        // 座標原点と回転角度を変更する ctx.translate(x, y)
        ctx.rotate(度 * 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.ストローク()
        }
      },
      描画ドット(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 * Math.PI)
          ctx.fill()
        }
      }
    },
    時計：
      識別コード() {
        この.drawPic()
      }
    },
    マウント() {
      この.drawPic()
    }
  }
</スクリプト>

<テンプレート>
  <div>
    <div>検証コードテスト</div>
    <div @click="refreshCode()" class="code" style="cursor:pointer;" title="クリックして確認コードを切り替えます">
      <s-identify :identifyCode="identifyCode"></s-identify>
    </div>
  </div>
</テンプレート>

<スクリプト>
'vue' から defineComponent をインポートします。
"@/common/sIdentify.vue" から sIdentify をインポートします。
// 'axios' から axios をインポート
エクスポートデフォルトdefineComponent({
  名前: 'WatermarkTest'、
  コンポーネント: { sIdentify },
  データ（） {
    戻る {
      識別コード: "",
      identifyCodes: ['0','1','2','3','4','5','6','7','8','9','a','b','c','d'], //実際のニーズに応じて必要な文字を追加します}
  },
  マウント() {
    this.refreshCode()
 },
 アンマウント() {

 },
  メソッド: {
    // 乱数を生成する randomNum(min, max) {
      最大値 = 最大値 + 1
      Math.floor(Math.random() * (max - min) + min) を返します。
    },
    // 検証コードを更新する refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      console.log('現在の検証コード:',this.identifyCode);
    },
    // 検証コードをランダムに生成する string makeCode(data, len) {
      console.log('データ, 長さ:', データ, 長さ)
      (i = 0; i < len; i++) の場合 {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length-1)]
      }
    },
  },
});
</スクリプト>