canvas--驗證碼
阿新 • • 發佈:2018-11-09
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{text-align: center} canvas{border:1px solid greenyellow} </style> </head> <body> <h1>canvas繪製驗證碼</h1> <canvas width="120" height="40" id="c1"> </canvas> <script> //1.新建一個函式產生隨機數 function rn(min,max){ return parseInt(Math.random()*(max-min)+min); } //2.新建一個函式產生隨機顏色 function rc(min,max){ var r=rn(min,max); var g=rn(min,max); var b=rn(min,max); return `rgb(${r},${g},${b})`; } //3.填充背景顏色,顏色要淺一點 var w=120; var h=40; var c1 = document.getElementById("c1"); var ctx=c1.getContext("2d"); ctx.fillStyle=rc(180,230); ctx.fillRect(0,0,w,h); //4.隨機產生字串 var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890"; for(var i=0;i<4;i++){ var c=pool[rn(0,pool.length)];//隨機的字 var fs=rn(18,40);//字型的大小 var deg=rn(-30,30);//字型的旋轉角度 ctx.font=fs+'px Simhei'; ctx.textBaseline="top"; ctx.fillStyle=rc(80,150); ctx.save(); ctx.translate(30*i+15,15); ctx.rotate(deg*Math.PI/180); ctx.fillText(c,-15+5,-15); ctx.restore(); } //5.隨機產生5條幹擾線,干擾線的顏色要淺一點 for(var i=0;i<5;i++){ ctx.beginPath(); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.strokeStyle=rc(180,230); ctx.closePath(); ctx.stroke(); } //6.隨機產生40個干擾的小點 for(var i=0;i<40;i++){ ctx.beginPath(); ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); ctx.closePath(); ctx.fillStyle=rc(150,200); ctx.fill(); } </script> </body> </html>