在网页设计中，尤其表单填写提交过程中，为防止机器自动登录，很多网页都采用验证码技术，允许用户输入而尽量避免自动登录。验证码实现的方法有很多，PHP绘图技术可以在服务端生成验证码并发送客户端，HTML5技术下可以使用canvas与JS脚本实现在客户端浏览器自动生成验证码。本文给出JS+Canvas验证码的解决措施，所制作验证码实现效果如下图所示：

验证码实现效果动态图

实现原理

本例验证码的实现主要包括验证码字符串的生成、背景干扰点实现及干扰直线的生成三部分。最终通过canvas绘图技术将生成的验证码字符串、背景及干扰直线显示到画布上。主要涉及技术或知识点包括canvas绘图技术、数组、鼠标点击事件、随机函数等。以下从验证字符串、背景干扰点及干扰直线三方面对实现过程进行说明。

验证字符串

验证字符串部分主要借助数组存储验证码所有字符，通过调用Math对象的随机函数获取数组下标，并通过数组下表读取数组元素，将读取的数组元素组装成完整字符串。其实现核心代码如下：

验证字符串获取核心代码

如上图所示，本例验证码字符包括数字与大写字母，getCode函数返回值即为4位验证码字符串。

背景干扰点

背景干扰点可以直接使用canvas对应的绘图方法进行绘制，本例为简化开发过程，降低难度直接使用drawImage绘图方式加载背景图片，实现干扰点效果。背景图片如下：

背景干扰点图片

通过调用drawImage方法，指定截取的坐标位置参数，可实现背景干扰点的动态变化效果，背景干扰点实现核心代码如下：

背景干扰点实现代码

其中getXsize与getYsize为获取绘图截取背景图片的坐标位置，通过使用随机函数实现从背景图片不同位置截取进行绘图输出。

干扰直线

干扰直线实现较为简单，直接通过JS提供的moveTo与lineTo方法完成直线的绘制，本例绘制了两条直线，一条为黑色干扰线，一条为白色干扰线。在绘制过程两端点需要使用Math随机函数生成符合条件随机坐标。干扰直线相关实现代码如下：

干扰直线实现核心代码

干扰直线实现核心代码如上图，其中getLsize方法主要用于获取随机端点Y轴坐标值。strokeStyle主要用于设置绘图直线的颜色。

验证码显示输出

验证码的显示输出主要使用fillText()方法在canvas指定位置进行文字输出，本例使用第三方ttf字体，因此在HTML页面中对字体进行了加载。验证码显示输出实现代码如下：

验证码绘制

验证码显示输出核心代码如上图所示，其中myfont为加载的第三方字体。

绘图基础部分

绘图基础部分主要包括前端canvas元素的布局等。包括属性的设置，js部分元素的获取及属性设置等。

其他工作

我们一般接触的验证码，都可以点击图片实现验证码的刷新，因此本例为canvas标记添加了onclick事件，将所有验证码生成的代码封装到showCode()函数中，通过调用showCode函数实现验证码的刷新。本例完整JS脚本部分代码如下：

JS实现脚本代码

本长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

1. 前端设计-Ajax技术及实例展示
2. 前端设计-响应式页面开发基础
3. Web开发前端、后端与全栈的区别是什么？