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 年月日联动实现核心代码
Dec 21 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
如何利用find命令查找文件
2015/02/07 面试题
党校个人自我鉴定范文
2014/03/28 职场文书
班组建设经验交流材料
2014/05/12 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
房产协议书范本
2014/10/18 职场文书
原告离婚代理词
2015/05/23 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android