canvas生成图片验证码

最新推荐文章于 2024-06-01 10:05:20 发布

generalfyx

最新推荐文章于 2024-06-01 10:05:20 发布

阅读量518

点赞数 3

分类专栏： JavaScript 文章标签： javascript canvas 图片验证码

本文链接：https://blog.csdn.net/generalfyx/article/details/92641494

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

其实这个东西是很简单的东西了，我自己很久没有动过canvas了，所以就写着玩了下。

只放下简单的代码，逻辑基本上是那一套逻辑。

<!doctype html>
<html>

<head>
    <title>canvas</title>
    <meta charset="utf-8">
    <style>
        body {
            height: 100%;
            width: 100%;
            position: absolute;
            display: table;
            margin: 0;
            background: rgba(41, 171, 226, 0.1)
        }

        .div {
            display: table;
            margin-top: 20px;
            height: 30px;
        }

        .div div {
            display: inline-block;
            vertical-align: middle;
        }

        .div div>* {
            height: 30px
        }
    </style>
</head>

<body>
    <div class="div">
        <div>
            验证码： <input type="text" id="input">
        </div>
        <div>
            <canvas id="testStock" width="80" height="30">
            </canvas>
        </div>
    </div>
</body>
<script>
    var VergifyGraph = (function (Main) {
        Main.random = function (min, max) { return Math.floor(Math.random() * (max - min) + min) };
        Main.store = 'abcdefghigklmnopqrstuvwxyz0123456789';
        Main.prototype = {
            validStr: '',
            refresh: function () {
                this.validStr = '';
                this.ctx.clearRect(0, 0, 80, 30);
                this.ctx.beginPath();
                this.ctx.fillStyle = `rgba(${Main.random(240, 255)},${Main.random(240, 255)},${Main.random(240, 255)},0.5)`;
                this.ctx.fillRect(0, 0, 80, 30);
                this.fillValid();
                this.fillPoint();
                this.ctx.closePath();
            },
            fillValid: function () {
                const x = this.bindDom.width / 6;
                const y = this.bindDom.height / 2;
                const ctx = this.ctx;
                ctx.fillStyle = `rgba(${Main.random(0, 224)},${Main.random(0, 224)},${Main.random(0, 224)},1)`;
                let text = '';
                for (let i = 0; i < 4 && (text = Main.store[Main.random(0, Main.store.length)], this.validStr += text); i++) {
                    this.ctx.font = '20px SimHei';
                    const deg = Main.random(-15, 15) * Math.PI / 180;
                    ctx.translate(x * (i + 1), y);
                    ctx.rotate(deg);
                    ctx.fillText(text, 0, 0);
                    ctx.rotate(-deg);
                    ctx.translate(-x * (i + 1), -y);
                }
            },
            initBind: function () {
                const that = this;
                this.bindDom.addEvent('click', function () {
                    that.refresh();
                }, true)
            },
            fillPoint: function () {
                const ctx = this.ctx;
                let i = 0;
                while (++i) {
                    ctx.fillStyle = `rgba(${Main.random(0, 224)},${Main.random(0, 224)},${Main.random(0, 224)},0.2)`;
                    ctx.beginPath();
                    ctx.arc(Main.random(0, this.bindDom.width), Main.random(0, this.bindDom.height), 1, 0, 2 * Math.PI);
                    ctx.fill();
                    if (i == 50) {
                        break;
                    }
                }
            }
        };
        return Main;
    })(function Main(id = '') {
        this.version = 'version ' + Main.random(1, 10);
        this.bindDom = document.getElementById(id);
        this.bindDom.addEvent = function () {
            const arg = arguments;
            const that = this;
            if (that.addEventListener) {
                that.addEventListener.apply(that, arg);
            } else {
                arg[0] = 'on' + arg[0];
                that.attachEvent.apply(that, arg);
            }
        }
        this.ctx = this.bindDom.getContext('2d');
        this.ctx.textBaseline = 'middle';
        this.initBind();
        this.refresh();
        this.constructor = VergifyGraph;
        VergifyGraph.prototype = Main.prototype;
    });
    var test = new VergifyGraph('testStock');
    document.getElementById('input').oninput = function (e) {
        if (this.value == test.validStr) {
            setTimeout(() => { alert('congratulation!') })
        }
    }
</script>
</html>

generalfyx

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas生成图片验证码

其实这个东西是很简单的东西了，我自己很久没有动过canvas了，所以就写着玩了下。只放下简单的代码，逻辑基本上是那一套逻辑。<!doctype html><html><head> <title>canvas</title> <meta charset="utf-8"> <style...
复制链接

扫一扫

专栏目录