前端开发验证码怎么做?Canvas版验证码生成

前端开发验证码|前端js开发

直接上码html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
</head>
<body>
    <canvas id=”canvas” width=”150″ height=”50″></canvas>
    <script>
        function randomNum(min, max) {
            return Math.floor(Math.random() * (max – min) + min);
        }
        function randomColor(min, max) {
            var _r = randomNum(min, max);
            var _g = randomNum(min, max);
            var _b = randomNum(min, max);
            return “rgb(” + _r + “,” + _g + “,” + _b + “)”;
        }
        document.getElementById(“canvas”).onclick = function (e) {
            e.preventDefault();
            drawPic();
        };
        function drawPic() {
            var $canvas = document.getElementById(“canvas”);
            var _str = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”;
            var _picTxt = “”;
            var _num = 6;
            var _width = $canvas.width;
            var _height = $canvas.height;
            var ctx = $canvas.getContext(“2d”);
            ctx.textBaseline = “bottom”;
            ctx.fillStyle = randomColor(180, 240);
            ctx.fillRect(0, 0, _width, _height);
            for (var i = 0; i < _num; i++) {
                var x = (_width – 10) / _num * i + 10;
                var y = randomNum(_height / 2, _height);
                var deg = randomNum(-45, 45);
                var txt = _str[randomNum(0, _str.length)];
                _picTxt += txt;
                ctx.fillStyle = randomColor(10, 100);
                ctx.font = randomNum(16, 40) + “px SimHei”;
                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(txt, 0, 0);
                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
            }
            for (var i = 0; i < _num; i++) {
                ctx.strokeStyle = randomColor(90, 180);
                ctx.beginPath();
                ctx.moveTo(randomNum(0, _width), randomNum(0, _height));
                ctx.lineTo(randomNum(0, _width), randomNum(0, _height));
                ctx.stroke();
            }
            for (var i = 0; i < _num * 10; i++) {
                ctx.fillStyle = randomColor(0, 255);
                ctx.beginPath();
                ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);
                ctx.fill();
            }
            return _picTxt;
        }
        drawPic();
    </script>
</body>
</html>
网站前端开发_前端开发者
https://www.rokub.com
» 本文来自:前端开发者 » 《前端开发验证码怎么做?Canvas版验证码生成》
» 本文链接地址:https://www.rokub.com/2735.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!