JavaScript使用canvas绘制随机验证码


Posted in Javascript onFebruary 17, 2020

本文实例为大家分享了使用canvas绘制随机验证码的具体代码,供大家参考,具体内容如下

理论基础:

掌握使用canvas绘制线条和圆形以及绘制文字

实现思路:

先构建一个画布,设置一定的宽高(在canvas中设置宽高和在style中设置是有区别的,建议直接在canvas标签中设置),封装一个生成随机数的方法,为线条和圆形的绘制设置随机的位置,既然是随机的,必然是有随机的区间,先获取画布的宽高,线条和圆的位置就是(0~画布的宽高区间)的随机位置,再定义一个随机字符,获取随机的索引值,即可生成随机的验证码。需要刷新,直接把以下代码封装在函数里,用一个事件触发即可。

源代码:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas验证码</title>
</head>
<body>
<canvas id="code" width="80" height="30" style="border: 1px solid #ccc"></canvas>

<script src="jq/jquery-3.2.1.min.js"></script>
<script>
 var canvasW=$("#code").width();
 var canvasH=$("#code").height();
 //获取任意区间随机数
 var getRandom=function (maxNum) {
 return Math.floor(Math.random()*maxNum);
 }
 //随机颜色
 var getColor=function () {
 var r=getRandom(256),
 g=getRandom(256),
 b=getRandom(256);
 return "rgb("+[r,g,b].join(',')+")";
 }
 var ctx=$("#code")[0].getContext("2d");
 var lineNum=3,arcNum=20;

 //绘制线
 for (var i=0;i<lineNum;i++){
 ctx.beginPath();
 ctx.moveTo(getRandom(canvasW),getRandom(canvasH));
 ctx.lineTo(getRandom(canvasW),getRandom(canvasH));
 ctx.strokeStyle=getColor();
 ctx.closePath();
 ctx.stroke();
 }
 //绘制点
 for (var i=0;i<arcNum;i++){
 ctx.beginPath();
 ctx.arc(getRandom(canvasW),getRandom(canvasH),1,0,2*Math.PI);
 ctx.fillStyle=getColor();
 ctx.closePath();
 ctx.fill();
 }
 //绘制验证码
 var codeTxt="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";;
 for(var i=0;i<4;i++){
 var txt=codeTxt.split("")[getRandom(codeTxt.length)];
 //绘制验证码
 ctx.beginPath();
 ctx.font="23px 微软雅黑";
 ctx.fillStyle=getColor();
 ctx.fillText(txt,20*i,25);
 ctx.closePath();
 }
</script>
</body>
</html>

最终效果:

JavaScript使用canvas绘制随机验证码

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

Javascript 相关文章推荐
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
js输出列表实现代码
Sep 12 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
js实现返回顶部效果
Mar 10 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 #Javascript
Vue 中使用 typescript的方法详解
Feb 17 #Javascript
vue框架中props的typescript用法详解
Feb 17 #Javascript
JS通用方法触发点击事件代码实例
Feb 17 #Javascript
JS前端广告拦截实现原理解析
Feb 17 #Javascript
JavaScript代码异常监控实现过程详解
Feb 17 #Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 #Javascript
You might like
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
TCP/IP模型的分界线
2012/12/01 面试题
求职信格式范本
2013/11/15 职场文书
运动会入场词60字
2014/02/15 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
公司员工奖惩制度
2015/08/04 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers