使用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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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批量删除jQuery操作
2017/07/23 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
经典c++面试题三
2015/07/08 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
汽车促销活动方案
2014/03/31 职场文书
在职员工证明书
2014/09/19 职场文书
食品安全责任书范本
2015/05/09 职场文书
罗马假日观后感
2015/06/08 职场文书
妈妈别哭观后感
2015/06/08 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Python开发简易五子棋小游戏
2022/05/02 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL