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

在很多时候都需要用到验证码，前端验证码需要知道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();
 };

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