首页 > H5教程 > 正文

如何使用canvas的得到验证码的效果(附源码)

原创 2018-09-15 16:00:26 0 212
赞助会员专享特权
本篇文章给大家带来的内容是关于如何使用canvas实现验证码的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在通常的登录界面我们都可以看到验证码,验证码的作用是检测是不是人在操作,防止机器等非人操作,防止数据库被轻而易举的攻破。

验证码一般用PHP和java等后端语言编写。

但是在前端,用canva或者SVG也可以绘制验证码。

绘制验证码不能是简单的随机字符串,而应该在绘制界面有一些干扰项:

如:干扰线段干扰圆点背景等等。

这里的这个demo的canvas验证码干扰项比较简单。

可以在图示中看到本例中的干扰项。

canvas验证码展示效果:

点击实现改变(重绘)验证码:

1401533-20180820124441681-909718362.gif

在控制台运行函数输出返回值(验证码):

1401533-20180820124451070-2008226531.gif

源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas验证码</title>
</head>

<body>
    <canvas width="200" height="60" id="check" style="border:1px solid #000;">您的浏览器不支持canvas标签!</canvas>
    <script>
        var ctx = document.getElementById("check").getContext("2d");
        var ctxW = document.getElementById("check").clientWidth;
        var ctxH = document.getElementById("check").clientHeight;

        /**
         * 产生一个随机数  可设置随机数区间
         * @param  {[Number]} min [随机数区间下限]
         * @param  {[Number]} max [随机数区间上限]
         * @return {[Number]}     [返回一个在此区间的随机数]
         */
        function ranNum(min, max) {

            return Math.random() * (max - min) + min;

        }

        /**
         * 返回一个随机颜色 可设置颜色区间
         * @param  {[Number]} min [颜色下限]
         * @param  {[Number]} max [颜色上限]
         * @return {[String]}     [随机颜色]
         */
        function ranColor(min, max) {

            var r = ranNum(min, max);

            var g