使用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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
js arguments对象应用介绍
Nov 28 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
three.js实现圆柱体
Dec 30 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
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
多重?l件?合查?(二)
2006/10/09 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
在Python中使用HTML模版的教程
2015/04/29 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Atom的python插件和常用插件说明
2018/07/08 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python excel转换csv代码实例
2019/08/26 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
高中生的自我评价
2014/03/04 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年调度员工作总结
2014/11/19 职场文书
优秀班集体申报材料
2014/12/25 职场文书
超市食品安全承诺书
2015/04/29 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle