使用canvas及js简单生成验证码方法


Posted in Javascript onApril 02, 2017

在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是

1.生成一张画布canvas

2.生成随机数验证码 

3.在画布中生成干扰线 

4.把验证码文本填充到画布中 

5.点击画布更换验证码

结构与样式:

<canvas id="mycanvas" width='90' height='40'>
 您的浏览器不支持canvas,请换个浏览器试试~
</canvas>

<style>
#mycanvas{
 cursor: pointer;
}
</style>

下面来编写js代码:

/*生成4位随机数*/
 function rand(){
  var str="abcdefghijklmnopqrstuvwxyz0123456789";
  var arr=str.split("");
  var validate="";
  var ranNum;
  for(var i=0;i<4;i++){
   ranNum=Math.floor(Math.random()*36); //随机数在[0,35]之间
   validate+=arr[ranNum];
  }
  return validate;
 }
 /*干扰线的随机x坐标值*/
 function lineX(){
  var ranLineX=Math.floor(Math.random()*90);
  return ranLineX;
 }
 /*干扰线的随机y坐标值*/
 function lineY(){
  var ranLineY=Math.floor(Math.random()*40);
  return ranLineY;
 }
 function clickChange(){
  var mycanvas=document.getElementById('mycanvas');
  var cxt=mycanvas.getContext('2d');
  cxt.fillStyle='#000';
  cxt.fillRect(0,0,90,40);
  /*生成干扰线20条*/
  for(var j=0;j<20;j++){
   cxt.strokeStyle='#fff';
   cxt.beginPath(); //若省略beginPath,则每点击一次验证码会累积干扰线的条数
   cxt.moveTo(lineX(),lineY());
   cxt.lineTo(lineX(),lineY());
   cxt.lineWidth=0.5;
   cxt.closePath();
   cxt.stroke();
  }
  cxt.fillStyle='red';
  cxt.font='bold 20px Arial';
  cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中  
 }
 clickChange();
 /*点击验证码更换*/
 mycanvas.onclick=function(e){
  e.preventDefault(); //阻止鼠标点击发生默认的行为
  clickChange();
 };

这样就写好一个较普通的验证码了,当然也有很多需要优化的地方,比如干扰线的随机颜色、可以加干扰点以及文本的随机位置随机颜色等等。赶紧去试试吧~

Javascript 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 #Javascript
Vue表单验证插件的制作过程
Apr 01 #Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 #Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
微信小程序网络请求的封装与填坑之路
Apr 01 #Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 #Javascript
You might like
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
关于php循环跳出的问题
2013/07/01 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
详解Python中heapq模块的用法
2016/06/28 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
毕业欢送会致辞
2015/07/29 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript