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:
|
<<: Docker memory monitoring and stress testing methods
>>: Don't forget to close the HTML tag
Docker tag detailed explanation The use of the do...
I worked in operations and maintenance for two ye...
The <tfoot> tag is used to define the style...
The current environment is: Centos 7.5 docker-ce ...
Table of contents Preface Query usage scenario ca...
Install boost There are many ways to call C/C++ f...
Table of contents 1. Make good use of components ...
Create a container [root@server1 ~]# docker run -...
There are some issues that are not limited to Vue...
This article shares the specific code of using ca...
Table of contents Preface 【undo log】 【redo log】 【...
As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...
This article describes how to export and import ....
JavaScript can do a lot of great things. This art...
I slept late yesterday and was awake the whole da...