jQuery Canvas zeichnet Bildüberprüfungscodebeispiel

.Identifikationscode{
    Position: absolut;
    rechts: 6px;
    oben: 50 %;
    Breite: 118px;
    Höhe: 40px;
    Rand: -21px 0 0 0;
}

<span id="Code" Klasse="Identifikationscode">
  <canvas class="show-captcha" id="canvas" style="Breite: 100%; Höhe: 100%;"></canvas>
</span>

/**Zeichnen Sie das Bild des Bestätigungscodes**/
Funktion zeichneBild() {
    var Leinwand = document.getElementById("Leinwand");
    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 = zufälligeFarbe(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 Bestätigungscodes generieren for(var i = 1;i <= 4; i++) {
        var txt = str[randomNum(0,str.length)];
        Code = Code + txt;
        ctx.fillStyle = zufälligeFarbe(50,160);
        //Schriftfarbe zufällig generieren ctx.font = randomNum(90,110) +'px SimHei';
        // Schriftgröße zufällig generieren var x = 10 + i * 50;
        var y = Zufallszahl(100, 135);
        var deg = Zufallszahl(-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 = zufälligeFarbe(40, 180);
        ctx.beginPath();
        ctx.moveTo(Zufallszahl(0,Breite/2), Zufallszahl(0,Höhe/2));
        ctx.lineTo(Zufallszahl(0,Breite/2), Zufallszahl(0,Höhe));
        ctx.stroke();
    }
    /**Interferenzpunkte zeichnen**/
    für(var i=0;i <50;i++) {
        ctx.fillStyle = zufälligeFarbe(255);
        ctx.beginPath();
        ctx.arc(Zufallszahl(0, Breite), Zufallszahl(0, Höhe),1,0,2* Math.PI);
        ctx.fill();
    }
    Rückgabecode;
}
/**Eine Zufallszahl generieren**/
Funktion Zufallszahl(min, max) {
    gibt Math.floor(Math.random() * (max - min) + min) zurück;
}
/**Erzeuge eine zufällige Farbe**/
Funktion Zufallsfarbe(min, max) {
    var r = Zufallszahl(min, max);
    var g = Zufallszahl(min, max);
    var b = Zufallszahl(min, max);
    gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
}

$("#code").unbind('klicken').klicken(function(e){
    e.preventDefault();
    Code erstellen();
});
//Bestätigungscode generieren Funktion createCode(){
  VerificationCodeErrCount = 0;
  Zufallscode = Bild zeichnen();
  gib zufälligen Code zurück;
}