工作中接到的任務是做一個帶干擾項的驗證碼，首先想到的是利用H5的canvas來實現。
本想直接網上copy一段程式碼，但很多都不符合需求，索性自己寫了，程式碼如下。

<canvas class="codeimg" id="codeimg" style="width: 120px;height: 36px">
    Your browser does not support the canvas element.
</canvas>   

<script type="text/javascript">
    var code = "";
    $().ready(function
 
() {
        //將函式返回值賦給code
        code = createCode();

        //點選canvas圖片更換驗證碼
        $("#codeimg").click(function () {
            createCode();
        });

        /*隨機字元函式*/
        function rand(){
            //去掉i,I,l,o,O等易混淆字母
            var str="abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ
            0123456789"
 
;
            //將字串分隔為陣列
            var arr=str.split("");
            //隨機字元在[0,56]之間
            var ranNum=Math.floor(Math.random()*57);
            var captcha=arr[ranNum];
            return captcha;
        }

        /*隨機干擾線條函式*/
        function drawline(canvas, context) { 
                //若省略beginPath，則每點選一次驗證碼會累積干擾線的條數
 

                context.beginPath();
                //起點與終點在canvas寬高內隨機
                context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  
                context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  
                context.lineWidth = 1;  
                context.strokeStyle = '#275DB3';        
                context.stroke();  
        }

        /*生成驗證碼*/
        function createCode(){
            //每次生成code先將其清空防止疊加
            code = ""; 
            var canvas = document.getElementById("codeimg");
            var context = canvas.getContext("2d");

            context.strokeStyle = "#FFF";
            context.strokeRect(0, 0, canvas.width, canvas.height); 

            //生成干擾線，數量隨意
            for (var i = 0; i < 20; i++) {  
                drawline(canvas, context);  
            }  

            //迴圈生成5位驗證碼
            for (var k = 0; k < 5; k++) {       
                context.font='76px Arial';
                //將初始狀態儲存
                context.save();
                //獲得-1到1的隨機數
                var rA = 1-Math.random()*2;
                //獲取隨機傾斜角
                var angle = rA / 8 ;
                var ranNum = rand();
                //旋轉生成的隨機字元
                context.rotate(angle);
                //把rand()生成的隨機數文字依次填充到canvas中，注意x座標
                context.fillText(ranNum,20+45*k,100);
                //恢復初始狀態，以便下一次迴圈
                context.restore();
                code += ranNum;
            } 
            //返回生成的驗證碼字串
            return code;
        }
    }
</script>

其中code變數是用來驗證使用者輸入值是否與驗證碼一致，作為登入驗證的條件，程式碼很簡單就不貼出來了。
最後看看效果圖：