js驗證碼實現---使用Canvas繪製一個隨機改變的驗證碼圖片
阿新 • • 發佈：2018-11-07
使用Canvas繪製一個隨機改變的驗證碼圖片,如下圖
var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';
var char = str[ 0~字串長度間的隨機數 ];
要求：
畫布背景顏色隨機(淺色) ctx.fillRect()
文字內容隨機、大小隨機，顏色隨機(深色)、旋轉角度隨機。
5條隨機干擾線（深色），處於文字上方。
100個雜色點（半徑為1為圓），處於文字上方。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>使用canvas繪製一幅驗證碼圖片</h3> <h4>真正的專案中,驗證碼圖片是由伺服器頁面(如PHP)生成的,此練習僅僅作為演示</h4> <canvas id="c1"></canvas> <a href="javascript:void(0)" onclick="location.reload()">看不清?換一張</a> <script> var w=120; //畫布的寬 var h=30; //畫布的高 c1.width=w; c1.height=h; var ctx=c1.getContext('2d'); //繪製隨機的背景顏色---填充一個大的矩形 ctx.fillStyle=rc(180,230); ctx.fillRect(0,0,w,h); //繪製隨機的文字--難點 ctx.textBaseline='top'; var pool='ABCDEFGHJKLMNPQRSTWXY3456789'; for(var i=0;i<4;i++){ var txt=pool[rn(0,pool.length)]; ctx.fillStyle=rc(80,180); ctx.font=rn(10,20)+'px Arial'; var txtWidth=ctx.measureText(txt).width; ctx.save(); //平移原點+旋轉畫筆 ctx.translate(i*30+15,15); ctx.rotate(rn(-15,15)*Math.PI/180); ctx.fillText(txt,rn(-15,15-txtWidth),rn(-15,15-txtWidth)); ctx.restore(); } //繪製6條隨機干擾線 for(var i=0;i<6;i++){ ctx.beginPath(); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.strokeStyle=rc(80,180); ctx.stroke(); } //繪製50個干擾點--半徑為1的圓 for(var i=0;i<50;i++){ ctx.beginPath(); ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); ctx.fillStyle=rc(80,230); ctx.fill(); } // random number:生成指定範圍內的隨機整數 function rn(min,max) { return Math.floor(Math.random()*(max-min)+min); } //random color:生成指定範圍內的隨機顏色 function rc(min,max) { var r=rn(min,max); var g=rn(min,max); var b=rn(min,max); return `rgb(${r},${g},${b})`; } </script> </body> </html>