jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Eingang{
            Breite: 200px;
            Höhe: 32px;
            Rand: 1px durchgezogen #000;
            Box-Größe: Rahmenbox;
        }
        #c1{
             vertikale Ausrichtung: Mitte;
             Box-Größe: Rahmenbox;
             Cursor: Zeiger;
        }
        #btn{
            Anzeige: Block;
            Rand oben: 10px;
            Höhe: 32px;
            Schriftgröße: 16px;
        }

<div Klasse="Code">
        <input type="text" value="" id="inputValue" placeholder="Bitte geben Sie den Bestätigungscode ein (Groß-/Kleinschreibung nicht beachten)">
    <canvas id="c1" width="100" height="30" style='border:1px solid black'></canvas>
    <button id="btn">Senden</button>    
   
</div>

$(Funktion(){
            //Zufälligen Bestätigungscode speichern var showNum=[]
            zeichnen(showNum)
            $('#c1').on('klicken',function(){
                zeichnen(showNum)
            })
            $('#btn').on('klicken',function(){
                var s = $('#Eingabewert').val().toLowerCase()
                var s1 = showNum.join("")
                wenn(s==s1){
                    alert('Übermittlung erfolgreich')
                }anders{
                    alert('Fehler beim Bestätigungscode')
                    zeichnen(showNum)
                }
            })
 
            //Kapsel eine Funktion zum Zeichnen eines zufälligen Bestätigungscodes auf der Zeichenfläche function draw(showNum){
                //Leinwand holen
                var Leinwand = $('#c1')
                var ctx = Leinwand[0].getContext('2d')
 
                //Breite und Höhe der Leinwand abrufen var canvas_width = canvas.width()
                var canvas_height = canvas.höhe()
 
                //Zuvor gezeichneten Inhalt löschen//0,0 Startkoordinaten löschen//Rechteckbreite und -höhe ctx.clearRect(0,0,canvas_width,canvas_height)
 
                //Zeichnen beginnen var scode='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,A,B,C,D,E,F,0,1,2,3,4,5,6,7,8,9'
                console.log("123");
                var arrCode = scode.split(',')
                Konsole.log(arrCode);
                var arrLength = arrCode.Länge
                für(var i=0;i<4;i++){
                    var index = Math.floor(Math.random()*arrCode.length)
                    //Ein zufälliges Zeichen var txt = arrCode[index]
                    showNum[i] = txt.toLowerCase()
 
                    //Beginnen Sie mit der Steuerung der Zeichenposition der Zeichen var x=10+20*i//Die x-Koordinate des Startpunkts jeder Zeichnung des Bestätigungscodes var y=20+Math.random()*8//Die y-Koordinate des Startpunkts ctx.font='bold 20px Microsoft YaHei' 
 
                    //Starten Sie die Rotation der Zeichen var deg = Math.random()-0.5
                    //Canvas möchte den Neigungseffekt des Zeicheninhalts erzielen, er muss zuerst übersetzt werden //Um den Rotationspunkt an die Stelle zu verschieben, an der der Inhalt gezeichnet wird ctx.translate(x,y)
                    ctx.rotate(Grad)
                    //Setze die Zeichenfarbe auf eine zufällige Farbe ctx.fillStyle=randomColor()
                    ctx.fillText(txt,0,0)
                    //Leinwand wiederherstellen ctx.rotate(-deg)
                    ctx.translate(-x,-y)
                    // ctx.stroke()
                }
                für(var i=0;i<=30;i++){
                    wenn(i<5){
                        //Linie zeichnen ctx.strokeStyle=randomColor()
                        ctx.beginPath()
                        ctx.moveTo(Math.random()*Leinwandbreite,Math.random()*Leinwandhöhe)
                        ctx.lineTo(Math.random()*Leinwandbreite,Math.random()*Leinwandhöhe)
                        ctx.stroke()
                    }
                    //Punkte zeichnen ctx.strokeStyle=randomColor()
                    ctx.beginPath()
                    x=Math.random()*Leinwandbreite
                    y=Math.random()*Leinwandhöhe
                    ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                    ctx.stroke()
                }
 
 
            }
            Funktion Zufallsfarbe(){
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)
                gibt `rgb(${r},${g},${b})` zurück
            }
        })