JavaScript 纯JS生成验证码

js生成验证码其实原理很简单，第一就是创建画布，第二获取验证码，第三将验证码画到画布上，接下来就看代码吧！

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";
        // 创建渐变
        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);//画布上添加验证码
    }
}