canvas基础之图形验证码的示例


Posted in HTML / CSS onJanuary 02, 2018

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

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

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

直接上干货:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas {
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <canvas id="myCanvas" width="100" height="40">
            您的浏览器不支持canvas
        </canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("myCanvas");
        var context = myCanvas.getContext("2d");
        //随机字符(透明度)(大小随机,位置随机);
        var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        //随机函数
        function roundNum(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }
        //文字内容部分:
        var str = "";
        for(var i = 0; i < 5; i++) {
            context.beginPath();
            //随机颜色(浅色:RGB - 200~250)
            var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
            context.fillStyle = color;
            context.font = roundNum(20,30)+"px Arial";
            context.textAlign = "center";
            str = strStore[roundNum(0,strStore.length)];
            context.fillText(str, 10 + 18 * i, roundNum(20,35));
        }

        //10个左右的随机(长度随机,位置随机),干扰线
        for(var j = 0; j < roundNum(5, 10); j++) {
            context.beginPath();
            var color = `rgb(${roundNum(0,255)},${roundNum(0,255)},${roundNum(0,255)})`;
            context.strokeStyle = color;
            context.moveTo(roundNum(0, 100), roundNum(0, 40));
            context.lineTo(roundNum(0, 100), roundNum(0, 40));
            context.stroke();
        }

        //干扰项:10个左右的随机(半径随机,位置随机),干扰圆
        for(var j = 0; j < roundNum(5, 10); j++) {
            context.beginPath();
            context.fillStyle = color;
            context.arc(roundNum(0, 100), roundNum(0, 40), roundNum(0, 5), Math.PI * 2 / (roundNum(1, 360)), Math.PI * 2 / (roundNum(1, 360)));
            context.fill();
        }
        
    </script>

</html>

结果如图:

canvas基础之图形验证码的示例

至于要拿来咋用,就看大家高兴了。想怎么整这么整。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 #HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 #HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 #HTML / CSS
详解Html5原生拖拽操作
Jan 12 #HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 #HTML / CSS
canvas烟花特效锦集
Jan 17 #HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 #HTML / CSS
You might like
php xml-rpc远程调用
2008/12/19 PHP
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
vue实现放大镜效果
2020/09/17 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python模块之paramiko实例代码
2018/01/31 Python
Python切片操作深入详解
2018/07/27 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
2014教师研修学习体会
2014/07/08 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
教师工作决心书
2015/02/04 职场文书
财务年终工作总结大全
2019/06/20 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
浅谈PHP7中的一些小技巧
2021/05/29 PHP
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL