jQuery uses the canvas tag to draw the verification code

input{
            width: 200px;
            height: 32px;
            border: 1px solid #000;
            box-sizing: border-box ;
        }
        #c1{
             vertical-align: middle;
             box-sizing: border-box;
             cursor: pointer;
        }
        #btn{
            display: block;
            margin-top: 10px;
            height: 32px;
            font-size: 16px;
        }

<div class="code">
        <input type="text" value="" id="inputValue" placeholder="Please enter the verification code (not case sensitive)">
    <canvas id="c1" width="100" height="30" style='border:1px solid black'></canvas>
    <button id="btn">Submit</button>    
   
</div>

$(function(){
            //Store random verification code var showNum=[]
            draw(showNum)
            $('#c1').on('click',function(){
                draw(showNum)
            })
            $('#btn').on('click',function(){
                var s = $('#inputValue').val().toLowerCase()
                var s1 = showNum.join("")
                if(s==s1){
                    alert('Submission successful')
                }else{
                    alert('Verification code error')
                    draw(showNum)
                }
            })
 
            //Encapsulate a function to draw a random verification code on the canvas function draw(showNum){
                //Get canvas
                var canvas = $('#c1')
                var ctx = canvas[0].getContext('2d')
 
                //Get the width and height of the canvas var canvas_width = canvas.width()
                var canvas_height = canvas.height()
 
                //Clear previously drawn content//0,0 Clear starting coordinates//Rectangle width and height ctx.clearRect(0,0,canvas_width,canvas_height)
 
                //Start drawing 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(',')
                console.log(arrCode);
                var arrLength = arrCode.length
                for(var i=0;i<4;i++){
                    var index = Math.floor(Math.random()*arrCode.length)
                    //A random character var txt = arrCode[index]
                    showNum[i] = txt.toLowerCase()
 
                    //Start controlling the drawing position of the characters var x=10+20*i//The x coordinate of the starting point of each verification code drawing var y=20+Math.random()*8//The y coordinate of the starting point ctx.font='bold 20px Microsoft YaHei' 
 
                    //Start rotating the characters var deg = Math.random()-0.5
                    //Canvas wants to achieve the tilt effect of drawing content, it must be translated first //In order to move the rotation point to the place where the content is drawn ctx.translate(x,y)
                    ctx.rotate(deg)
                    //Set the drawing color to a random color ctx.fillStyle=randomColor()
                    ctx.fillText(txt,0,0)
                    //Restore the canvas ctx.rotate(-deg)
                    ctx.translate(-x,-y)
                    // ctx.stroke()
                }
                for(var i=0;i<=30;i++){
                    if(i<5){
                        //Draw line ctx.strokeStyle=randomColor()
                        ctx.beginPath()
                        ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.stroke()
                    }
                    //Draw points ctx.strokeStyle=randomColor()
                    ctx.beginPath()
                    x=Math.random()*canvas_width
                    y=Math.random()*canvas_height
                    ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                    ctx.stroke()
                }
 
 
            }
            function randomColor(){
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)
                return `rgb(${r},${g},${b})`
            }
        })