js canvas implementiert den Bestätigungscode und erhält die Bestätigungscodefunktion

/**Paket**/
var xh_digital_code = Funktion(Option) {
    dies.el = option.el;
    var selbst = dies;
    var Klickcode = '';

    var canvas_id = "xh_canvas_" + xh_randomWord(false, 30); // Eine zufällige ID generieren
    $(self.el).html('<canvas class="xh_canvas" id="' + canvas_id + '"></canvas>');

    var code = xh_drawPic(canvas_id);

    $('body').on('click', self.el, function() {
        Klickcode = xh_drawPic(Leinwand-ID);
        selbstcode = Klickcode;
        zurückkehren;
    });
    
    selbst.code = Code;
}

/**Zeichnen Sie das Bild des Bestätigungscodes**/
Funktion xh_drawPic(Leinwand-ID) {
    var canvas = document.getElementById(canvasid);
    var Breite = Leinwand.Breite;
    var Höhe = Leinwand.Höhe;
    //Holen Sie sich die 2D-Zeichenumgebung der Leinwand var ctx = canvas.getContext('2d');
    ctx.textBaseline = "unten";
    /**Zeichne die Hintergrundfarbe**/
    ctx.fillStyle = xh_randomColor(180, 240);
    //Wenn die Farbe zu dunkel ist, ist sie möglicherweise nicht klar ctx.fillRect(0, 0, width, height);
    /**Text zeichnen**/
    var str = 'ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy';
    var code = "";
    //Vier Verifizierungscodes generieren für (var i = 1; i <= 4; i++) {
        var txt = str[xh_randomNum(0, str.Länge)];
        Code = Code + txt;
        ctx.fillStyle = xh_randomColor(50, 160);
        //Schriftfarbe zufällig generieren ctx.font = xh_randomNum(90, 110) + 'px SimHei';
        // Schriftgröße zufällig generieren var x = 10 + i * 50;
        var y = xh_randomNum(100, 135);
        var deg = xh_randomNum(-30, 30);
        //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);
    }

    /**Interferenzlinie zeichnen**/
    für (var i = 0; i < 3; i++) {
        ctx.strokeStyle = xh_randomColor(40, 180);
        ctx.beginPath();
        ctx.moveTo(xh_randomNum(0, Breite / 2), xh_randomNum(0, Höhe / 2));
        ctx.lineTo(xh_randomNum(0, Breite / 2), xh_randomNum(0, Höhe));
        ctx.stroke();
    }
    /**Interferenzpunkte zeichnen**/
    für (var i = 0; i < 50; i++) {
        ctx.fillStyle = xh_randomColor(255);
        ctx.beginPath();
        ctx.arc(xh_randomNum(0, Breite), xh_randomNum(0, Höhe), 1, 0, 2 * Math.PI);
        ctx.fill();
    }
    Rückgabecode;
}



/**Eine Zufallszahl generieren**/
Funktion xh_randomNum(min, max) {
    gibt Math.floor(Math.random() * (max - min) + min) zurück;
}

/**Erzeuge eine zufällige Farbe**/
Funktion xh_randomColor(min, max) {
    var r = xh_randomNum(min, max);
    var g = xh_randomNum(min, max);
    var b = xh_randomNum(min, max);
    gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
}

/**Einen zufälligen Code generieren**/
Funktion xh_randomWord(randomFlag, min, max) {
    var str = "",
        Bereich = min,
        arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', ​​\u200b\u200b', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    // Zufällig generieren, wenn (randomFlag) {
        Bereich = Math.round(Math.random() * (max - min)) + min;
    }
    für (var i = 0; i < Bereich; i++) {
        pos = Math.round(Math.random() * (arr.length - 1));
        str += arr[pos];
    }
    gibt str zurück;
}

<!--- Zitat--->
<span class="Identifikationscode"></span>
<button class="xh-btn xh-btn-success" id="get_code">Bestätigungscode abrufen</button>

<Skripttyp="text/javascript">
  var c = neuer xh_digital_code({
        el: '.identify-code' // .Klassenname#ID-Name});

    $('#get_code').klick(Funktion(){
     // Dies ist ein Popup-Informations-Plugin, das ich geschrieben habe. Ignorieren Sie es. c.code kann die Informationen im Bestätigungscode abrufen. $(this).xh_prompt('success', 'Der aktuelle Bestätigungscode lautet: '+c.code, 1000);
    });
</Skript>