canvas-驗證碼
阿新 • • 發佈：2018-02-01
下標 save script ctype ans htm http for pos
純屬對Canvas API的練習
效果圖：
目標：
1.畫布中隨機出現4個字母或數字的驗證碼
2.驗證嗎，內容隨機，顏色隨機，位置在當前塊內隨機；
3.添加4條幹擾線，顏色長度隨機
4.添加50個幹擾顆粒，顏色隨機，半徑為1；
思路：
1.由於使用隨機數據多，所以封裝隨機數函數 rn(min,max)
function rn(min,max){ return Math.floor(Math.random()*(max-min)+min); }
//返回大於等於min ,小於max的數字
2.由於隨機顏色使用多，封裝隨機顏色函數 rc(min,max)
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 pool=‘ABCDEFGHEIJDKMNP123456789‘;
//繪制4次 for(var i=0;i<4;i++){ var txt=pool[rn(0,pool.length)]; ctx.font="10px Arial"; ctx.save();
//獲取文本寬度 var tw=ctx.measureText(txt).width;
//以中心旋轉，旋轉角度（0-90）隨機ctx.translate(30*i+15,10); ctx.rotate(rn(0,90)*Math.PI/180); ctx.fillStyle=rc(80,140); ctx.textBaseline="top";
//繪制文本 ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10)) ctx.restore(); }
4.6條幹擾線
for(var i=0;i<6;i++){ ctx.beginPath(); ctx.strokeStyle=rc(60,120); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); ctx.stroke(); }
5. 50個幹擾點
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(0,255); ctx.fill(); }
完整代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{text-align: center} </style> </head> <body> <h3>Canvas繪制畫布</h3> <canvas id="c1"></canvas> <script> var w=120; var h=30; c1.width=w; c1.height=h; var ctx=c1.getContext("2d"); ctx.fillStyle=rc(200,250); ctx.fillRect(0,0,w,h); // 繪制隨機文本 var pool=‘ABCDEFGHEIJDKMNP123456789‘; for(var i=0;i<4;i++){ var txt=pool[rn(0,pool.length)]; ctx.font="10px Arial"; ctx.save(); var tw=ctx.measureText(txt).width; ctx.translate(30*i+15,10); ctx.rotate(rn(0,90)*Math.PI/180); ctx.fillStyle=rc(80,140); ctx.textBaseline="top"; ctx.fillText(txt,rn(-10,10-tw),rn(-10,10-10)) ctx.restore(); } // 繪制隨機6條幹擾線 for(var i=0;i<6;i++){ ctx.beginPath(); ctx.strokeStyle=rc(60,120); ctx.moveTo(rn(0,w),rn(0,h)); ctx.lineTo(rn(0,w),rn(0,h)); 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(0,255); ctx.fill(); } // 隨機顏色 function rc(min,max){ var r=rn(min,max); var g=rn(min,max); var b=rn(min,max); return `rgb(${r},${g},${b})`; } // 隨機數字 function rn(min,max){ return Math.floor(Math.random()*(max-min)+min); } </script> </body> </html>
canvas-驗證碼