使用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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
Document 对象的常用方法
Jul 31 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
js中创建对象的几种方式
Feb 05 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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获取指定月份第一天和最后一天的方法
2015/07/18 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Add a Table to a Word Document
2007/06/15 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue-父子组件和ref实例详解
2019/11/10 Javascript
详谈Python基础之内置函数和递归
2017/06/21 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
个人现实表现材料
2014/02/04 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python