jQuery uses the canvas tag to draw the verification code

jQuery uses the canvas tag to draw the verification code

The <canvas> element is designed for client-side vector graphics. It has no behavior of its own, but exposes a drawing API to client-side JavaScript so that the script can draw whatever it wants onto a canvas.

The code is as follows

css:

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;
        }

​html:

<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>

JavaScript:

$(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})`
            }
        })

To achieve this effect

If you click on the canvas tag, a picture will be replaced

If the input is correct, a prompt box "Input correct" will pop up.

If there is an error, it will prompt "Input error" and a verification code box will be replaced after clicking OK

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JQuery implements a simple verification code prompt solution
  • jQuery implements the countdown code for sending verification code by mobile phone
  • jQuery implements sending verification code and 60-second countdown function
  • Jquery plug-in to prevent re-obtaining within 60 seconds after clicking to obtain the verification code
  • jQuery plugin to implement static HTML verification code verification
  • jQuery click to get the verification code button and countdown function
  • jQuery implements verification code function
  • jQuery implements a simple verification code function
  • jQuery implements form to obtain SMS verification code
  • jQuery implements the countdown effect code sharing of sending verification code by mobile phone

<<:  Docker memory monitoring and stress testing methods

>>:  Don't forget to close the HTML tag

Recommend

Detailed explanation of count(), group by, order by in MySQL

I recently encountered a problem when doing IM, a...

Why does your height:100% not work?

Why doesn't your height:100% work? This knowl...

Vue recursively implements three-level menu

This article example shares the specific code of ...

Implementing login page based on layui

This article example shares the specific code of ...

Detailed tutorial on setting password for MySQL free installation version

Method 1: Use the SET PASSWORD command MySQL -u r...

How to use VirtualBox to build a local virtual machine environment on Mac

1. Big Data and Hadoop To study and learn about b...

Summary of basic SQL statements in MySQL database

This article uses examples to describe the basic ...

Analysis of the implementation process of three modes of VMWare network adapter

Three modes Bridged (bridge mode), NAT (network a...