Canvas入门实战之用javascript面向对象实现一个图形验证码

徐小夕
• 阅读 1229

本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能，关于canvas的一些基本使用方法和API我整理了一个思维导图，大家感兴趣的可以参考学习。

Canvas入门实战之用javascript面向对象实现一个图形验证码

你将收获

  • 闭包的使用
  • canvas常用api的使用
  • javascript面向对象的实现方式
  • 实现一个canvas的图形验证码的一般思路和常用算法

设计思路

  1. 用canvas生成画布
  2. 用canvas画干扰线或躁点
  3. 生成随机不重复的n的字母
  4. 用canvas绘制文字
  5. 初始化和canvas点击事件
  6. 组件化封装

文末将附上组件封装的源码，欢迎大家随时沟通交流。关于项目的打包，我将使用自己基于gulp4搭建的9012教你如何使用gulp4开发项目脚手架。

效果预览

Canvas入门实战之用javascript面向对象实现一个图形验证码

实现思路

我将按照上文中的设计思路的步骤一步步实现，首先我们先定义一个es5类：

function Gcode(el, option) {
    this.el = typeof el === 'string' ? document.querySelector(el) : el;
    this.option = option;
    this.init();
}

其中init是用来初始化用的，参数el代表需要挂载的元素或元素id，option为传入的可选项，稍后会在代码中体现，通常这也是面向对象的常用套路。

  1. 绘制画布

    Gcode.prototype = {
 constructor: Gcode,
 init: function() {
     if(this.el.getContext) {
         isSupportCanvas = true;
         var ctx = this.el.getContext('2d'),
         // 设置画布宽高
         cw = this.el.width = this.option.width || 200,
         ch = this.el.height = this.option.height || 40;
     }
 }
}

    这里我们在初始化方法中先定义一个canvas画布，宽高为用户自定义的宽高，默认为200*40。

  2. 绘制干扰线

    // 画干扰线
drawLine: function(ctx, lineNum, maxW, maxH) {
 ctx.clearRect(0, 0, maxW, maxH);
 for(var i=0; i < lineNum; i++) {
     var dx1 = Math.random()* maxW,
         dy1 = Math.random()* maxH,
         dx2 = Math.random()* maxW,
         dy2 = Math.random()* maxH;
     ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')';
     ctx.beginPath();
     ctx.moveTo(dx1, dy1);
     ctx.lineTo(dx2, dy2);
     ctx.stroke();
 }
}

    这里我们对类Gcode定义原型方法drawLine，然后通过for循环绘制随机位置的线条，为了让canvas每次点击能清空之前的干扰线，我们使用clearRect来清除画布。

  3. 生成随机不重复的n个字符

我们通过递归实现，如下==：

// 生成唯一文字
generateUniqueText: function(source, hasList, limit) {
    var text = source[Math.floor(Math.random()*limit)];
    if(hasList.indexOf(text) > -1) {
        return this.generateUniqueText(source, hasList, limit)
    }else {
        return text
    }  
}
// 生成指定个数的随机文字
randomText: function(len) {
    var source = ['a', 'b', 'c', 'd', 'e',
    'f', 'g', 'h', 'i', 'j', 
    'k', 'l', 'm', 'o', 'p',
    'q', 'r', 's', 't', 'u',
    'v', 'w', 'x', 'y', 'z'];
    var result = [];
    var sourceLen = source.length;
    for(var i=0; i< len; i++) {
        var text = this.generateUniqueText(source, result, sourceLen);
        result.push(text)
    }
    return result.join('')
}

我们通过定义一个字母表，传入生成的随机字母的个数，配合generateUniqueText来实现生成唯一不重复的n个随机字符。当然笔者认为这个方法并不优雅，你也可以使用uuid的方式或者更好的方式，欢迎随时和笔者交流。

  1. 用canvas绘制文字

    // 画文字
drawText: function(ctx, text, maxH) {
 var len = text.length;
 for(var i=0; i < len; i++) {
     var dx = 30 * Math.random() + 30* i,
         dy = Math.random()* 5 + maxH/2;
     ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')';
     ctx.font = '30px Helvetica';
     ctx.textBaseline = 'middle';
     ctx.fillText(text[i], dx, dy);
 }
},

    这里和上文画线实现类似。就不做过多介绍了。

  2. 初始化和canvas点击事件

接下来我们看看完整的初始化代码：

init: function() {
    if(this.el.getContext) {
        isSupportCanvas = true;
        var ctx = this.el.getContext('2d'),
        // 设置画布宽高
        cw = this.el.width = this.option.width || 200,
        ch = this.el.height = this.option.height || 40,
        textLen = this.option.textLen || 4,
        lineNum = this.option.lineNum || 4;
        var text = this.randomText(textLen);

        this.onClick(ctx, textLen, lineNum, cw, ch);
        this.drawLine(ctx, lineNum, cw, ch);
        this.drawText(ctx, text, ch);
    }
}

点击事件主要是为了用户点击可以切换验证码：

onClick: function(ctx, textLen, lineNum, cw, ch) {
    var _ = this;
    this.el.addEventListener('click', function(){
        text = _.randomText(textLen);
        _.drawLine(ctx, lineNum, cw, ch);
        _.drawText(ctx, text, ch);
    }, false)
}

到此，一个完整的验证码组件实现完成，怎么用呢？如下：

new Gcode('#canvas_code', {
        lineNum: 6,  // 可选
        textLen: 4,  // 可选
        width: 200,  // 可选
        height: 50   // 可选
    })

完整代码如下，欢迎学习交流：

// canvas绘制图形验证码
    (function(){
        function Gcode(el, option) {
            this.el = typeof el === 'string' ? document.querySelector(el) : el;
            this.option = option;
            this.init();
        }
        Gcode.prototype = {
            constructor: Gcode,
            init: function() {
                if(this.el.getContext) {
                    isSupportCanvas = true;
                    var ctx = this.el.getContext('2d'),
                    // 设置画布宽高
                    cw = this.el.width = this.option.width || 200,
                    ch = this.el.height = this.option.height || 40,
                    textLen = this.option.textLen || 4,
                    lineNum = this.option.lineNum || 4;
                    var text = this.randomText(textLen);

                    this.onClick(ctx, textLen, lineNum, cw, ch);
                    this.drawLine(ctx, lineNum, cw, ch);
                    this.drawText(ctx, text, ch);
                }
            },
            onClick: function(ctx, textLen, lineNum, cw, ch) {
                var _ = this;
                this.el.addEventListener('click', function(){
                    text = _.randomText(textLen);
                    _.drawLine(ctx, lineNum, cw, ch);
                    _.drawText(ctx, text, ch);
                }, false)
            },
            // 画干扰线
            drawLine: function(ctx, lineNum, maxW, maxH) {
                ctx.clearRect(0, 0, maxW, maxH);
                for(var i=0; i < lineNum; i++) {
                    var dx1 = Math.random()* maxW,
                        dy1 = Math.random()* maxH,
                        dx2 = Math.random()* maxW,
                        dy2 = Math.random()* maxH;
                    ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')';
                    ctx.beginPath();
                    ctx.moveTo(dx1, dy1);
                    ctx.lineTo(dx2, dy2);
                    ctx.stroke();
                }
            },
            // 画文字
            drawText: function(ctx, text, maxH) {
                var len = text.length;
                for(var i=0; i < len; i++) {
                    var dx = 30 * Math.random() + 30* i,
                        dy = Math.random()* 5 + maxH/2;
                    ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')';
                    ctx.font = '30px Helvetica';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(text[i], dx, dy);
                }
            },
            // 生成指定个数的随机文字
            randomText: function(len) {
                var source = ['a', 'b', 'c', 'd', 'e',
                'f', 'g', 'h', 'i', 'j', 
                'k', 'l', 'm', 'o', 'p',
                'q', 'r', 's', 't', 'u',
                'v', 'w', 'x', 'y', 'z'];
                var result = [];
                var sourceLen = source.length;
                for(var i=0; i< len; i++) {
                    var text = this.generateUniqueText(source, result, sourceLen);
                    result.push(text)
                }
                return result.join('')
            },
            // 生成唯一文字
            generateUniqueText: function(source, hasList, limit) {
                var text = source[Math.floor(Math.random()*limit)];
                if(hasList.indexOf(text) > -1) {
                    return this.generateUniqueText(source, hasList, limit)
                }else {
                    return text
                }  
            }
        }
        new Gcode('#canvas_code', {
            lineNum: 6
        })
    })();

如果想体验实际案例效果和技术交流，或者感受更多原创canvas,h5游戏demo，可以关注趣谈前端感受哈

更多推荐

postjavascriptcanvas初始化https前端前端前端
点赞
收藏
评论区
推荐文章
blmius blmius
•
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
3492
0
0
Karen110 Karen110
•
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期（年、月、日、小时、分钟、秒和毫秒）。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期，指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
1192
0
0
Jacquelyn38 Jacquelyn38
•
2年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
1973
0
0
helloworld_34035044 helloworld_34035044
•
1年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
771
0
0
Stella981 Stella981
•
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
1216
0
0
Wesley13 Wesley13
•
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
914
0
0
Wesley13 Wesley13
•
2年前
00：Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。
894
0
0
Stella981 Stella981
•
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段，id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
840
0
0
Wesley13 Wesley13
•
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1107
0
0
Python进阶者 Python进阶者
•
3个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
122
0
0
徐小夕
徐小夕
Lv1
男 · 上海我们科技 · 前端开发leader
do or never do
文章
116
粉丝
28
获赞
61
热门文章
vue3.0-template-admin | 一款基于vite的开箱即用的后台管理模版
从零使用electron搭建桌面端可视化编辑器
从零开发一款可视化大屏制作平台
什么是低代码（Low-Code）？
成长路线: 一个前端工程师的120天