canvas实现图形验证码小插件

之前的做项目的时候，需要用到图形验证码。那时候的我刚写前端三四个月，遇到什么功能模块，首先都会想去网上找找插件，别人写好的拿来用。现在的我，首先会先考虑这个东西我自己能不能写出来，实在不行的话再去找找别人怎么做的，找方法。再不行的话，因为项目赶时间的问题，就先找找插件来先用着，以后有时间再做优化。

所以那时候我用的图形验证码也是网上找的插件，用的不顺手，不能做到自己想要的效果。

最近一直在看javascript原型的东西，就想着做点什么东西练练，试试去用面向对象的思维去写代码。就写个图形验证码吧。

接下来开始讲一下实现的过程：(对于下面一些理解是我目前作为一个从事前端工作半年的理解，可能有些地方的理解是错的，后面有更深的理解我会做修改，或者有大神帮忙指正一下)

首先定义一个立即执行函数，带两个参数：window和ducument

我的理解：定义立即执行函数，形成一个作用域，可以避免变量的冲突。也相当于是一个模块。传入的两个参数是后面在立即执行函数内需要用到的。前面的感叹号是因为javascript默认是不需要已;号结尾的，所以避免发生一些代码意外拼接的情况，也可以加  + 号，还有其他的。

定义一个对象：

初始化对象的属性：

判断传入的参数类型，如果传入的是对象类型，则修改默认的对象的属性：

因为图形验证码有字母，有数字，也有数字和字母混合的，所以定义两个数组：

再给对象添加两个方法，一个是初始化方法_init(),一个是刷新验证码refresh()：

对象定义完成，接下来要写初始化方法、刷新验证码、验证验证码的方法

通过prototype给对象添加方法：

我的理解：prototype可以给对象添加属性或方法。

初始化：

我的理解：通过传入的容器（比如说div）的id，给div内添加一个canvas画布，并设置画布的宽高等属性，添加一个点击canvas刷新验证码的事件。

生成和刷新验证码的方法：

我的理解：调用canvas的属性和方法来生成canvas上面的验证码。

验证验证码的方法：

我的理解：通过传入参数--用户输入的验证码，来跟之前生成的验证码比对，并返回结果。

下面是定义的一些其他方法：

最后把这个对象对外开放接口，才可以调用：

调用方式：

效果图：

到这里结束了，很简单的一个小插件，为了熟悉一下js的面向对象编程，练练手。

下载地址：点击下载