Html5生成验证码的示例代码


Posted in Javascript onMay 10, 2021

利用Html5的canvas标签生成画布,在画布上利用随机生成的数字画上验证码,背景为随机生成的颜色和杂乱的直线与点点。

进阶:利用表单插件属性绑定验证码数据(json)可以在发送时候或者异步通信进行后台数据获取与检查。

代码块

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
<style type="text/css">
    #canvas{
        cursor:pointer;
    }
</style>
</head>
<body>
    <canvas id="canvas" width="150px" height="50px"></canvas>
<script>
        //生成随机数
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
        //生成随机颜色RGB分量
    function randomColor(min,max){
        var _r = randomNum(min,max);
        var _g = randomNum(min,max);
        var _b = randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
    }
    //先阻止画布默认点击发生的行为再执行drawPic()方法
    document.getElementById("canvas").onclick = function(e){
        e.preventDefault();
        drawPic();
    };
    function drawPic(){
        //获取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789";//设置随机数库
        var _picTxt = "";//随机数
        var _num = 4;//4个随机数字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");//获取 context 对象
        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
        ctx.fillStyle = randomColor(180,240);//填充画布颜色
        ctx.fillRect(0,0,_width,_height);//填充矩形--画画
        for(var i=0; i<_num; i++){
            var x = (_width-10)/_num*i+10;
            var y = randomNum(_height/2,_height);
            var deg = randomNum(-45,45);
            var txt = _str[randomNum(0,_str.length)];
            _picTxt += txt;//获取一个随机数
            ctx.fillStyle = randomColor(10,100);//填充随机颜色
            ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小,字体为SimHei
            ctx.translate(x,y);//将当前xy坐标作为原始坐标
            ctx.rotate(deg*Math.PI/180);//旋转随机角度
            ctx.fillText(txt, 0,0);//绘制填色的文本
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        for(var i=0; i<_num; i++){
            //定义笔触颜色
            ctx.strokeStyle = randomColor(90,180);
            ctx.beginPath();
            //随机划线--4条路径
            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
            ctx.stroke();
        }
        for(var i=0; i<_num*10; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            //随机画原,填充颜色
            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
        return _picTxt;//返回随机数字符串
    }
    drawPic();
</script>
</body>
</html>

到此这篇关于Html5生成验证码的示例代码的文章就介绍到这了,更多相关Html5生成验证码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JavaScript 常用函数
Dec 30 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
zf框架的Filter过滤器使用示例
2014/03/13 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
javascript 三种编解码方式
2010/02/01 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python2与python3共存问题的解决方法
2018/09/18 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python3实现表白神器
2019/04/09 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
自我鉴定范文200字
2013/10/02 职场文书
青春寄语大全
2014/04/09 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL