js Implementierung des Verifizierungscode-Falls

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: 20px;
            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>
        <br>
        <button id="btn">Senden</button>
</div>

$(Funktion(){
            //Zufälligen Bestätigungscode speichern var showNum = []
 
            zeichnen(showNum)
 
            $("#c1").klick(function(){
                zeichnen(showNum)
            })
            $("#btn").klick(function(){
                var s = $("#Eingabewert").val().toLowerCase()
                var s1 = showNum.join("")
                wenn (s==s1) {
                    alert("Übermittlung erfolgreich")
                }anders{
                    alert("Fehler beim Bestätigungscode")
                }
                zeichnen(showNum)
            })
 
 
            // Kapseln Sie einen zufälligen Verifizierungscode in die Canvas-Funktion draw(showNum){
                // Leinwand holen
                var Leinwand = $("#c1")
                var ctx = canvas[0].getContext("2d")
                // Breite und Höhe der Leinwand abrufen var canvas_width = canvas.width()
                var canvas_height = canvas.höhe()
                // Den zuvor gezeichneten Inhalt löschen // 0,0 Die zu löschenden Startkoordinaten // Die Breite und Höhe des Rechtecks ​​ctx.clearRect(0,0,canvas_width,canvas_height)
                // Beginnen Sie mit dem Zeichnen. 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,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,"
                var arrCode = scode.split(",")
                var arrLength = arrCode.Länge
                für(var i = 0;i<4;i++){
                    var index = Math.floor(Math.random()*arrCode.length)
                    var txt = arrCode[index] //Wähle zufällig ein Zeichen aus showNum[i] = txt.toLowerCase() //In Kleinbuchstaben umwandeln und im Bestätigungscode-Array speichern //Beginnen Sie mit der Steuerung der Zeichenposition des Zeichens var x = 10 +20*i //Die x-Koordinate des Startpunkts jeder Bestätigungscode-Zeichnung var y = 20 + Math.random()*8 //Die y-Koordinate des Startpunkts ctx.font = "bold 20px Microsoft YaHei"
                    // Beginne mit der Drehung des Zeichens var deg = Math.random*-0.5
                    // Um ​​den Effekt des Neigens des gezeichneten Inhalts zu erzielen, muss zuerst die Leinwand verschoben werden. Der Zweck besteht darin, den Drehpunkt an die Stelle zu verschieben, an der der Inhalt gezeichnet wird. ctx.translate (x, y).
                    ctx.rotate(Grad)
                    // Zufällige Farbe der Zeichnung festlegen ctx.fillStyle = randomColor()
                    ctx.fillText(txt,0,0)
 
                    // Leinwand wiederherstellen ctx.rotate(-deg)
                    ctx.translate(-x,-y)
 
                }
                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()
                    var x = Math.random()*Leinwandbreite
                    var y = Math.random()*Leinwandhöhe
                    ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                    ctx.stroke()
 
                }
 
 
            }
 
            // Zufallsfarbfunktion randomColor(){
                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
 
            }
 
        })