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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php精确的统计在线人数的方法
2015/10/21 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
python绘图方法实例入门
2015/05/19 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
利用Python如何生成便签图片详解
2018/07/09 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
信访工作者先进事迹
2014/01/17 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
节约用水演讲稿
2014/05/21 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
歌咏比赛主持词
2015/06/29 职场文书
运动会100米加油稿
2015/07/21 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL