<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>canvas绘制验证码</h1> <canvas id="randomCode" width="150px;" height="50px" style="border:1px solid #bbbbbb;cursor: pointer;" title="点击更换验证码"> </canvas> <script> var c=document.getElementById("randomCode"); var w=c.offsetWidth; var h=c.offsetHeight; randomStr(); function randomStr(){ var ctx=c.getContext('2d'); ctx.clearRect(0,0,150,150); //先清除canvas画布 var Letter="ABCDEFGHIJKLMNOPQRSTUVWHYZ1234567890"; Letter=Letter.split(''); for(let i=0;i<4;i++){ var char=Letter[Math.floor(Math.random()*36)]; var fs=returnNum(30,60);//字体的大小 var deg=returnNum(-30,30);//字体的旋转角度 ctx.font=fs+'px Simhei'; ctx.textBaseline="top"; ctx.fillStyle=randomColor(); ctx.save(); ctx.translate(30*i+15,15); ctx.rotate(deg*Math.PI/180); ctx.fillText(char,-15+5,-15); ctx.restore(); } for(let q=0;q<6;q++){ ctx.beginPath(); ctx.lineWidth="1"; ctx.strokeStyle=randomColor(); // Green path ctx.moveTo(returnNum(0,w),returnNum(0,h)); ctx.lineTo(returnNum(0,w),returnNum(0,h)); ctx.stroke(); // Draw it } } function randomColor(){ color = '#'+Math.floor(Math.random()*16777215).toString(16); if(color.length==6){ color+="0" } return color; } function returnNum(min,max){ return parseInt(Math.random()*(max-min)+min); } c.addEventListener("click",function(){ randomStr() }) </script> </body> </html>