在通常的登錄界面我們都可以看到驗證碼，驗證碼的作用是檢測是不是人在操作，防止機器等非人操作，防止數據庫被輕而易舉的攻破。
驗證碼一般用PHP和java等后端語言編寫；
但是在前端，用canva或者SVG也可以繪制驗證碼；
讓我們先來看一個簡單的但是有點丑的驗證碼：
繪制驗證碼的關鍵點：選取的四個字符隨機、字體的顏色、旋轉角度隨機、其中有五條線和50個隨機的小點來干擾；
步驟：
畫淺色背景
畫隨機文字
畫5條干擾線
畫100條干擾點（半徑為1的圓）
1.新建一個函數產生隨機數
//1.新建一個函數產生隨機數
function rn(min,max){
return parseInt(Math.random()*(max-min)+min);
}
2.新建一個函數產生隨機的顏色
//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 ctx=c1.getContext("2d");
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h);
4.隨機產生字符串
//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條干擾線
//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個干擾的小點
//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(); }
7.完整源代碼
<!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 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>