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学习笔记(十)
Jan 17 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
You might like
PHP四舍五入精确小数位及取整
2014/01/14 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
javascript的函数
2007/01/31 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
python读取图片任意范围区域
2019/01/23 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
postman和python mock测试过程图解
2020/02/22 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
项目合作计划书
2014/01/09 职场文书
法律六进活动方案
2014/03/13 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
出国留学单位推荐信
2015/03/26 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Go标准容器之Ring的使用说明
2021/05/05 Golang
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers