js生成驗證碼其實原理很簡單，第一就是創(chuàng)建畫布，第二獲取驗證碼，第三將驗證碼畫到畫布上，接下來就看代碼吧！

yanzhengma.png

添加畫布

<canvas id="myCanvas" width="70px" height="27px" style="float: right; border:1px solid #d3d3d3;"></canvas>

js生成驗證碼

function createCode() {
    code = "";
    var codeLength = 4;//驗證碼的長度，可變
    var canvas=document.getElementById('myCanvas');//獲取畫布
    var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候選組成驗證碼的字符

    for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 36);
        code += selectChar[charIndex];
    }
     if (canvas) {
        var ctx=canvas.getContext('2d');
        ctx.fillStyle='#FFFFFF';
        ctx.fillRect(0,0,70,27);
        ctx.font="20px arial";
        // 創(chuàng)建漸變
        var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        // 用漸變填色
        ctx.strokeStyle=gradient;
        ctx.strokeText(code,5,20);//畫布上添加驗證碼
    }
}