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 NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
浅谈JS的二进制家族
May 09 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python数组并集交集补集代码实例
2020/02/18 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
捐书活动总结
2014/05/04 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
思想工作总结范文
2015/08/12 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python