使用canvas及js簡單產生驗證碼方法

標籤：填充   樣式   結構   etc   and   random   close   onclick   pat   

在很多時候都需要用到驗證碼，前端驗證碼需要知道Html5中的canvas知識點。驗證碼產生步驟是：1.產生一張畫布canvas 2.產生隨機數驗證碼  3.在畫布中產生幹擾線  4.把驗證碼文本填充到畫布中  5.點擊畫布更換驗證碼

結構與樣式：

<canvas id="mycanvas" width=‘90‘ height=‘40‘>    您的瀏覽器不支援canvas，請換個瀏覽器試試~</canvas>

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

下面來編寫js代碼：

    /*產生4位隨機數*/    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);   //隨機數在[0,35]之間            validate+=arr[ranNum];        }        return validate;    }    /*幹擾線的隨機x座標值*/    function lineX(){        var ranLineX=Math.floor(Math.random()*90);        return ranLineX;    }    /*幹擾線的隨機y座標值*/    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，則每點擊一次驗證碼會累積幹擾線的條數            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()產生的隨機數文本填充到canvas中          }     clickChange();    /*點擊驗證碼更換*/    mycanvas.onclick=function(e){        e.preventDefault();   //阻止滑鼠點擊發生預設的行為        clickChange();    };

這樣就寫好一個較普通的驗證碼了，當然也有很多需要最佳化的地方，比如幹擾線的隨機顏色、可以加幹擾點以及文本的隨機位置隨機顏色等等。趕緊去試試吧~

使用canvas及js簡單產生驗證碼方法