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 the use of docker tag and docker push

Docker tag detailed explanation The use of the do...

Summary of some of my frequently used Linux commands

I worked in operations and maintenance for two ye...

HTML table tag tutorial (46): table footer tag

The <tfoot> tag is used to define the style...

How to use Dockerfile to create a mirror of the Java runtime environment

The current environment is: Centos 7.5 docker-ce ...

Mysql date formatting and complex date range query

Table of contents Preface Query usage scenario ca...

Some suggestions on Vue code readability

Table of contents 1. Make good use of components ...

Independent implementation of nginx container configuration file

Create a container [root@server1 ~]# docker run -...

Summary of common problems and solutions in Vue (recommended)

There are some issues that are not limited to Vue...

JavaScript uses canvas to draw coordinates and lines

This article shares the specific code of using ca...

A brief analysis of the differences between undo, redo and binlog in MySQL

Table of contents Preface 【undo log】 【redo log】 【...

Operate on two columns of data as new columns in sql

As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...

How to export and import .sql files under Linux command

This article describes how to export and import ....

Summary of 50+ Utility Functions in JavaScript

JavaScript can do a lot of great things. This art...