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

在很多時候都需要用到驗證碼，前端驗證碼需要知道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();
    };

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