使用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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
用Vue写一个分页器的示例代码
Apr 22 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
js DOM的事件常见操作实例详解
Dec 16 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
PHP远程采集图片详细教程
2014/07/01 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python Process多进程实现过程
2019/10/22 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python中元组的用法整理
2020/06/15 Python
大学生职业生涯规划范文
2014/01/22 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
服务员岗位职责范本
2015/04/09 职场文书
初中班干部工作总结
2015/08/10 职场文书
导游词之潮音寺
2019/09/26 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python