前端之家收集整理的这篇文章主要介绍了
JavaScript Canvas实现验证码,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。
验证码一般用PHP和java等后端语言编写。
但是在前端,用canva或者SVG也可以绘制验证码。
绘制验证码不能是简单的随机字符串,而应该在绘制界面有一些干扰项:
如:
干扰线段、干扰圆点、背景等等。
这里的这个demo的canvas验证码干扰项比较简单。
可以在图示中看到本例中的干扰项。
canvas验证码展示效果:
点击实现改变(重绘)验证码:
在控制台运行函数输出返回值(验证码):
源码 :
<
Meta charset="UTF-8">
<
Meta name="viewport" content="width=device-width,initial-scale=1.0">
<
Meta http-equiv="X-UA-Compatible" content="ie=edge">
canvas验证码