栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

JavaScript使用canvas绘制随机验证码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

JavaScript使用canvas绘制随机验证码

本文实例为大家分享了使用canvas绘制随机验证码的具体代码,供大家参考,具体内容如下

理论基础:

掌握使用canvas绘制线条和圆形以及绘制文字

实现思路:

先构建一个画布,设置一定的宽高(在canvas中设置宽高和在style中设置是有区别的,建议直接在canvas标签中设置),封装一个生成随机数的方法,为线条和圆形的绘制设置随机的位置,既然是随机的,必然是有随机的区间,先获取画布的宽高,线条和圆的位置就是(0~画布的宽高区间)的随机位置,再定义一个随机字符,获取随机的索引值,即可生成随机的验证码。需要刷新,直接把以下代码封装在函数里,用一个事件触发即可。

源代码:




 
 
 
 canvas验证码