js+canvas制作前端验证码

最新推荐文章于 2024-03-06 17:49:45 发布

weixin_30745641

最新推荐文章于 2024-03-06 17:49:45 发布

阅读量94

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/zhaodesheng/p/9729762.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
    </head>

    <body>
        <canvas id="identify"></canvas>
        <button id="changeCode">看不清，换一个</button>
    </body>
    <script type="text/javascript">
        class IdentifyCode {
            constructor(canvasId, width, height) {
                this.width = width;
                this.height = height;
                this.canvas = document.querySelector(canvasId);
                this.ctx = this.canvas.getContext("2d");
                this.code = "";
                this.codeRange = [];

                this.generateCodeRange();
                this.freshCode();
            }

            //
            initCanvas() {
                this.canvas.width = this.width;
                this.canvas.height = this.height;
            }

            // 生成随机色
            randomColor() {
                var colorStr = "#";
                for(let i = 0; i < 6; i++) {
                    colorStr += Math.floor(Math.random() * 16).toString(16);
                }
                return colorStr;
            }

            // 生成二维码字母范围
            generateCodeRange() {
                var codeRange = [];
                for(let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
                    codeRange.push(String.fromCharCode(i));
                }
                for(let i = "a".charCodeAt(0); i <= "z".charCodeAt(0); i++) {
                    codeRange.push(String.fromCharCode(i));
                }
                for(let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
                    codeRange.push(String.fromCharCode(i));
                }
                this.codeRange = codeRange;
                // return codeRange;
            }

            // 生成四位随机数
            randomCode() {
                this.code = "";
                var len = this.codeRange.length;
                for(let i = 0; i < 4; i++) {
                    this.code += this.codeRange[Math.floor(Math.random() * len)];
                }
            }

            // 画背景色
            drawBackground() {
                var bgColor = "#b0aa93";
                //        console.log(bgColor)
                this.ctx.rect(0, 0, this.width, this.height);
                this.ctx.fillStyle = bgColor;
                this.ctx.fill();
            }

            // 画干扰线
            drawDisturbLines() {
                for(let i = 0; i < 4; i++) {
                    this.drawOneLine();
                }
            }
            drawOneLine() {
                var startX = Math.floor(Math.random() * this.width);
                var startY = Math.floor(Math.random() * this.height);
                var endX = Math.floor(Math.random() * this.width);
                var endY = Math.floor(Math.random() * this.height);
                this.ctx.strokeStyle = this.randomColor();
                this.ctx.lineWidth = Math.ceil(Math.random() * 2);
                this.ctx.beginPath();
                this.ctx.moveTo(startX, startY);
                this.ctx.lineTo(endX, endY);
                this.ctx.closePath();
                this.ctx.stroke();
            }

            // 画干扰点
            drawDisturbDots() {
                for(let i = 0, count = this.width * this.height / 100; i < count; i++) {
                    this.drawOneDot();
                }
            }
            drawOneDot() {
                var ox = Math.floor(Math.random() * this.width);
                var oy = Math.floor(Math.random() * this.height);
                this.ctx.fillStyle = this.randomColor();
                this.ctx.beginPath();
                this.ctx.arc(ox, oy, 1, 0, 2 * Math.PI);
                this.ctx.closePath();
                this.ctx.fill();
            }

            // 画文字(数字或字母)
            drawLetters() {
                for(let i = 0, len = this.code.length; i < len; i++) {
                    let offsetX = this.width * 0.15; // 中间的70%画字母，两边各15%
                    let offsetY = this.height * 0.15;
                    let lineHeight = this.height * 0.7;
                    let x = i * this.width * 0.7 / this.code.length + offsetX;
                    let y = this.height / 2;
                    let letter = this.code[i];
                    let fontSize = Math.min(parseInt(this.height), parseInt(this.width * 0.7));
                    //console.log(fontSize)
                    this.drawOneLetter(letter, x, y, fontSize);
                }
            }
            drawOneLetter(letter, x, y, fontSize) {
                this.ctx.font = fontSize + "px Times new roman";
                this.ctx.textBaseline = "middle";
                this.ctx.fillStyle = this.randomColor();
                this.ctx.fillText(letter, x, y);
            }

            // 更换一个验证码
            freshCode() {
                this.clear();
                this.randomCode();
                //console.log(this.code);
                this.initCanvas();
                this.drawBackground();
                this.drawDisturbLines();
                this.drawDisturbDots();
                this.drawLetters();
            }

            // 清除画布
            clear() {
                this.ctx.clearRect(0, 0, this.width, this.height);
            }
        }
    </script>
    <script type="text/javascript">
        var identifyCode = new IdentifyCode("#identify", 100, 40);
        console.log(identifyCode.code);
        var changeCode = document.querySelector("#changeCode");
        changeCode.onclick = function() {
            identifyCode.freshCode();
            console.log(identifyCode.code);
        }
    </script>

</html>

使用方法：

1. new IdentifyCode("canvas的选择器","canvas的宽","canvas的高");

2. 将用户输入的验证码.toLowerCase()与identifyCode.code.toLowerCase()对比正误。

3. identifyCode.freshCode() 刷新验证码。

转载于:https://www.cnblogs.com/zhaodesheng/p/9729762.html

weixin_30745641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+canvas制作前端验证码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>验证码</title> </head> <body> <canvas id="i...
复制链接

扫一扫