第使用canvas及js簡(jiǎn)單生成驗(yàn)證碼方法在很多時(shí)候都需要用到驗(yàn)證碼，前端驗(yàn)證碼需要知道Html5中的canvas知識(shí)點(diǎn)。驗(yàn)證碼生成步驟是：

1.生成一張畫布canvas

2.生成隨機(jī)數(shù)驗(yàn)證碼

3.在畫布中生成干擾線

4.把驗(yàn)證碼文本填充到畫布中

5.點(diǎn)擊畫布更換驗(yàn)證碼

結(jié)構(gòu)與樣式：

canvasid="mycanvas"width='90'height='40'

您的瀏覽器不支持canvas，請(qǐng)換個(gè)瀏覽器試試~

/canvas

style

#mycanvas{

cursor:pointer;

/style

下面來編寫js代碼：

/*生成4位隨機(jī)數(shù)*/

functionrand(){

varstr="abcdefghijklmnopqrstuvwxyz0123456789";

vararr=str.split("");

varvalidate="";

varranNum;

for(vari=0;ii++){

ranNum=Math.floor(Math.random()*36);//隨機(jī)數(shù)在[0,35]之間

validate+=arr[ranNum];

returnvalidate;

/*干擾線的隨機(jī)x坐標(biāo)值*/

functionlineX(){

varranLineX=Math.floor(Math.random()*90);

returnranLineX;

/*干擾線的隨機(jī)y坐標(biāo)值*/

functionlineY(){

varranLineY=Math.floor(Math.random()*40);

returnranLineY;

functionclickChange(){

varmycanvas=document.getElementById('mycanvas');

varcxt=mycanvas.getContext('2d');

cxt.fill;

cxt.fillRect(0,0,90,40);

/*生成干擾線20條*/

for(varj=0;jj++){

cxt.stroke;

cxt.beginPath();//若省略beginPath，則每點(diǎn)擊一次驗(yàn)證碼會(huì)累積干擾線的條數(shù)

cxt.moveTo(lineX(),lineY());

cxt.lineTo(lineX(),lineY());

cxt.lineWidth=0.5;

cxt.closePath();

cxt.stroke();

cxt.fill;

cxt.font='bold20pxArial';

cxt.fillText(rand(),25,25);//把rand()生成的隨機(jī)數(shù)文本填充到canvas中

clickChange();

/*點(diǎn)擊驗(yàn)證碼更換*/

mycanvas.unction(e){

e.preventDefault();//阻止鼠標(biāo)點(diǎn)擊發(fā)生默認(rèn)的行為

clickChange();