代碼：
<!DOCTYPE html> <html> <!-- head --> <head> <title>圖片登錄驗證</title> </head> <body> <input type="text" value="" placeholder="請輸入驗證碼（區分大小寫）" style="height:43px;position: relative; top:-15px; font-size:20px;"id ="text"> <canvas id="canvas" width="100" height="43" onclick="dj()" style="border: 1px solid #ccc; border-radius: 5px;"></canvas> <button class="btn" onclick="sublim()">提交</button> </body> <script> var show_num = []; draw(show_num); function dj(){ draw(show_num); } function sublim(){ var val=document.getElementById("text").value; var num = show_num.join(""); if(val==''){ alert('請輸入驗證碼！'); }else if(val == num){ alert('提交成功！'); document.getElementById(".input-val").val(''); draw(show_num); }else{ alert('驗證碼錯誤！\n你輸入的是: '+val+"\n正確的是: "+num+'\n請重新輸入！'); document.getElementById("text").value=''; draw(show_num); } } function draw(show_num) { var canvas_width=document.getElementById('canvas').clientWidth; var canvas_height=document.getElementById('canvas').clientHeight; var canvas = document.getElementById("canvas");//獲取到canvas的對象，演員 var context = canvas.getContext("2d");//獲取到canvas畫圖的環境，演員表演的舞台 canvas.width = canvas_width; canvas.height = canvas_height; var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m"; var aCode = sCode.split(","); var aLength = aCode.length;//獲取到數組的長度 for (var i = 0; i <= 3; i++) { var j = Math.floor(Math.random() * aLength);//獲取到隨機的索引值 var deg = Math.random() * 30 * Math.PI / 180;//產生0~30之間的隨機弧度 var txt = aCode[j];//得到隨機的一個內容 show_num[i] = txt; var x = 10 + i * 20;//文字在canvas上的x坐標 var y = 20 + Math.random() * 8;//文字在canvas上的y坐標 context.font = "bold 23px 微軟雅黑"; context.translate(x, y); context.rotate(deg); context.fillStyle = randomColor(); context.fillText(txt, 0, 0); context.rotate(-deg); context.translate(-x, -y); } for (var i = 0; i <= 5; i++) { //驗證碼上顯示線條 context.strokeStyle = randomColor(); context.beginPath(); context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height); context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height); context.stroke(); } for (var i = 0; i <= 30; i++) { //驗證碼上顯示小點 context.strokeStyle = randomColor(); context.beginPath(); var x = Math.random() * canvas_width; var y = Math.random() * canvas_height; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.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 + ")"; } </script> </html>
大佬的地址：https://blog.csdn.net/qq_42463851/article/details/90755734