Das Vue-Projekt implementiert einen grafischen Überprüfungscode

<Vorlage>
  <div Klasse="s-canvas">
    <canvas id="s-canvas" :width="Inhaltsbreite" :height="Inhaltshöhe"></canvas>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "SIdentify",
  Requisiten: {
    Identifizierungscode:
      Typ: Zeichenfolge,
      Standard: "1234"
    },
    SchriftgrößeMin: {
      Typ: Nummer,
      Standard: 35
    },
    SchriftgrößeMax: {
      Typ: Nummer,
      Standard: 35
    },
    HintergrundFarbeMin: {
      Typ: Nummer,
      Standard: 180
    },
    HintergrundFarbeMax: {
      Typ: Nummer,
      Standard: 240
    },
    FarbeMin:
      Typ: Nummer,
      Standard: 50
    },
    FarbeMax: {
      Typ: Nummer,
      Standard: 160
    },
    LinienfarbeMin: {
      Typ: Nummer,
      Standard: 100
    },
    ZeilenfarbeMax: {
      Typ: Nummer,
      Standard: 200
    },
    PunktFarbeMin: {
      Typ: Nummer,
      Standard: 0
    },
    PunktFarbeMax: {
      Typ: Nummer,
      Standard: 255
    },
    Inhaltsbreite: {
      Typ: Nummer,
      Standard: 120
    },
    Inhaltshöhe: {
      Typ: Nummer,
      Standard: 40
    }
  },
  Methoden: {
    // Erzeuge eine Zufallszahl randomNum(min, max) {
      gibt Math.floor(Math.random() * (max - min) + min) zurück;
    },
    // Erzeuge eine zufällige Farbe randomColor(min, max) {
      sei r = diese.Zufallszahl(min, max);
      sei g = diese.Zufallszahl(min, max);
      sei b = diese.Zufallszahl(min, max);
      gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
    },
    transparent() {
      gibt "rgb(255,255,255)" zurück;
    },
    zeichneBild() {
      let canvas = document.getElementById("s-canvas");
      Lassen Sie ctx = canvas.getContext("2d");
      ctx.textBaseline = "unten";
      // Zeichne den Hintergrund // ctx.fillStyle = this.randomColor(
      // diese.backgroundColorMin,
      // dies.backgroundColorMax
      // );
      ctx.fillStyle = this.transparent();
      ctx.fillRect(0, 0, diese.Inhaltsbreite, diese.Inhaltshöhe);
      // Text zeichnen für (let i = 0; i < this.identifyCode.length; i++) {
        dies.drawText(ctx, dies.identifyCode[i], i);
      }
      // diese.drawLine(ctx)
      // dies.drawDot(ctx)
    },
    zeichneText(ctx, txt, i) {
      ctx.fillStyle = diese.randomColor(diese.colorMin, diese.colorMax);
      ctx.Schriftart =
        diese.randomNum(diese.fontSizeMin, diese.fontSizeMax) + "px SimHei";
      sei x = (i + 1) * (diese.Inhaltsbreite / (diese.IdentifyCodelänge + 1));
      sei y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
      var deg = diese.randomNum(-10, 10);
      // Koordinatenursprung und Drehwinkel ändern ctx.translate(x, y);
      ctx.rotate((Grad * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      // Koordinatenursprung und Drehwinkel wiederherstellen ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    zeichneLinie(ctx) {
      // Zeichne Interferenzlinien für (let i = 0; i < 8; i++) {
        ctx.strokeStyle = diese.randomColor(
          diese.lineColorMin,
          diese.lineColorMax
        );
        ctx.beginPath();
        ctx.moveTo(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight)
        );
        ctx.lineTo(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight)
        );
        ctx.stroke();
      }
    },
    Punkt zeichnen(ctx) {
      // Zeichne Interferenzpunkte für (let i = 0; i < 100; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(
          diese.randomNum(0, diese.contentWidth),
          diese.randomNum(0, diese.contentHeight),
          1,
          0,
          2 * Math.PI
        );
        ctx.fill();
      }
    }
  },
  betrachten:
    identifiziereCode() {
      dies.drawPic();
    }
  },
  montiert() {
    dies.drawPic();
  }
};
</Skript>

<Vorlage>
<div Klasse="Code abrufen" @click="refreshCode()">
    <s-identify :identifyCode="identifyCode"></s-identify>
</div>
</Vorlage>
<Skript>
    importiere SIdentify aus "@/components/sIdentify.vue";
    Standard exportieren {
        Komponenten: { SIdentify },
        Daten() {
           zurückkehren {
                Identifizierungscode: "",
                identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ", // einfach eintippen}
        },
        Methoden: {            
           Aktualisierungscode () {//
             dieser.identifyCode = "";
             dies.makeCode(diese.identifyCodes,4);
           },
           Zufallszahl (min, max) {
             max = max + 1
             gibt Math.floor(Math.random() * (max - min) + min) zurück
           },
           // Bestätigungscode zufällig generieren string makeCode (data, len) {
             für (sei i = 0; i < len; i++) {
             dieser.identifyCode += Daten[diese.randomNum(0, Datenlänge - 1)]
           }
        }
    }
</Skript>