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 transform 属性来变换背景图的方法
May 07 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
sina的lightbox效果。
2007/01/09 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python中return语句用法实例分析
2015/08/04 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Django之PopUp的具体实现方法
2019/08/31 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
教室标语大全
2014/06/21 职场文书
陕西导游词
2015/02/04 职场文书
帝企鹅日记观后感
2015/06/10 职场文书