canvas验证码 - 随机字母数字

时间：2023-03-09 13:13:50
canvas验证码 - 随机字母数字

基于canvas制作随机生成数字英文组合验证码效果，点击或刷新会自动重组。输入验证码提交验证效果代码。

canvas验证码 - 随机字母数字

     <div class="verification">

         <input type="text" value="" placeholder="请输入验证码（不区分大小写）" id="verInput">

         <canvas id="verCanvas" width="80" height="28"></canvas>

         <button id="verSubmit" onclick="verify()">提交</button>

     </div>

     <script type="text/javascript" src="makeCode.js"></script>

     <script type="text/javascript">

     var verCanvas = document.getElementById("verCanvas");

     var verValue = makeCode(verCanvas);

     verCanvas.onclick = function(){

         verValue = makeCode(verCanvas);

     };

     function verify(){

         var value = document.getElementById("verInput").value;

         if(value.toLowerCase()==verValue){

             alert("验证成功")

         }else{

             alert("验证失败")

         }

     }

     </script>
function makeCode(canvas, codeLenght) {

    codeLenght = codeLenght || 4; //默认4个字符

    var valueArr = [];

    var canvasWidth = canvas.width;

    var canvasHeight = canvas.height;

    var context = canvas.getContext("2d");

    context.clearRect(0,0,canvasWidth,canvasHeight);

    //设置所有可能出现的字符

    var codeLib = ["A", "B", "C", "E", "F", "G", "H", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "a", "b", "c", "d", "e", "f", "h", "k", "m", "n", "p", "r", "s", "t", "w", "x", "y", "z", "3", "4", "5", "6", "8"];

    var codeLibLength = codeLib.length;

    for (var i = 0; i < codeLenght; i++) {

        // 获得随机字符

        var txt = codeLib[parseInt(Math.random() * codeLibLength)];

        valueArr.push(txt.toLowerCase());

        //产生-20~20之间的随机弧度

        var deg = (Math.random() * 40-20) * Math.PI / 180;

        //文字在canvas上的坐标位置

        var x = (canvasWidth / (codeLenght + 1)) * (i + 0.5);

        var y = Math.random()*(canvasHeight*1/5)+(canvasHeight*7/10);

        //字体设置

        var fontSize = canvasHeight*3/4;

        context.font = "bold " + fontSize + "px 微软雅黑";

        context.translate(x, y);

        context.rotate(deg);

        context.fillStyle = "rgb("+parseInt(Math.random()*200)+","+parseInt(Math.random()*200)+","+parseInt(Math.random()*200)+")";

        context.fillText(txt, 0, 0);

        context.rotate(-deg);

        context.translate(-x, -y);

    }

    //验证码上显示线条

    for (var i = 0; i<5; i++) {

        context.strokeStyle = "rgb("+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+")";

        context.beginPath();

        context.moveTo(Math.random() * canvasWidth, Math.random() * canvasHeight);

        context.lineTo(Math.random() * canvasWidth, Math.random() * canvasHeight);

        context.stroke();

    }

    //验证码上显示小点

    for (var i = 0; i <= 24; i++) {

        context.strokeStyle = "rgb("+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+","+parseInt(Math.random()*100+155)+")";

        context.beginPath();

        var x = Math.random() * canvasWidth;

        var y = Math.random() * canvasHeight;

        context.moveTo(x, y);

        context.lineTo(x + 1, y + 1);

        context.stroke();

    }

    //返回当前验证码的值

    return valueArr.join("");

}

相关文章