使用canvas及js簡單生成驗(yàn)證碼方法

更新時(shí)間：2017年04月02日 17:03:51 作者：heyujun-

在很多時(shí)候都需要用到驗(yàn)證碼，前端驗(yàn)證碼需要知道Html5中的canvas知識點(diǎn)。驗(yàn)證碼生成步驟是：1.生成一張畫布canvas 2.生成隨機(jī)數(shù)驗(yàn)證碼 3.在畫布中生成干擾線 4.把驗(yàn)證碼文本填充到畫布中 5.點(diǎn)擊畫布更換驗(yàn)證碼

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

1.生成一張畫布canvas

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

3.在畫布中生成干擾線

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

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

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

<canvas id="mycanvas" width='90' height='40'>
 您的瀏覽器不支持canvas，請換個(gè)瀏覽器試試~
</canvas>

<style>
#mycanvas{
 cursor: pointer;
}
</style>

下面來編寫js代碼：

/*生成4位隨機(jī)數(shù)*/
 function rand(){
  var str="abcdefghijklmnopqrstuvwxyz0123456789";
  var arr=str.split("");
  var validate="";
  var ranNum;
  for(var i=0;i<4;i++){
   ranNum=Math.floor(Math.random()*36); //隨機(jī)數(shù)在[0,35]之間
   validate+=arr[ranNum];
  }
  return validate;
 }
 /*干擾線的隨機(jī)x坐標(biāo)值*/
 function lineX(){
  var ranLineX=Math.floor(Math.random()*90);
  return ranLineX;
 }
 /*干擾線的隨機(jī)y坐標(biāo)值*/
 function lineY(){
  var ranLineY=Math.floor(Math.random()*40);
  return ranLineY;
 }
 function clickChange(){
  var mycanvas=document.getElementById('mycanvas');
  var cxt=mycanvas.getContext('2d');
  cxt.fillStyle='#000';
  cxt.fillRect(0,0,90,40);
  /*生成干擾線20條*/
  for(var j=0;j<20;j++){
   cxt.strokeStyle='#fff';
   cxt.beginPath(); //若省略beginPath，則每點(diǎn)擊一次驗(yàn)證碼會累積干擾線的條數(shù)
   cxt.moveTo(lineX(),lineY());
   cxt.lineTo(lineX(),lineY());
   cxt.lineWidth=0.5;
   cxt.closePath();
   cxt.stroke();
  }
  cxt.fillStyle='red';
  cxt.font='bold 20px Arial';
  cxt.fillText(rand(),25,25); //把rand()生成的隨機(jī)數(shù)文本填充到canvas中  
 }
 clickChange();
 /*點(diǎn)擊驗(yàn)證碼更換*/
 mycanvas.onclick=function(e){
  e.preventDefault(); //阻止鼠標(biāo)點(diǎn)擊發(fā)生默認(rèn)的行為
  clickChange();
 };

這樣就寫好一個(gè)較普通的驗(yàn)證碼了，當(dāng)然也有很多需要優(yōu)化的地方，比如干擾線的隨機(jī)顏色、可以加干擾點(diǎn)以及文本的隨機(jī)位置隨機(jī)顏色等等。趕緊去試試吧~

您可能感興趣的文章: