汇盛国际:使用canvas及js简单生成验证码方法

标签:游戏玩法    日期:2017-11-13 10:49    录入:汇盛国际平台    浏览:

  

[canvas,生成验证码,js,canvas,绘制验证码]使用canvas及js简单生成验证码方法

  

在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:  

  

1.生成一张画布canvas  

  

2.生成随机数验证码  

  

3.在画布中生成干扰线  

  

4.把验证码文本填充到画布中  

  

5.点击画布更换验证码  

  

结构与样式:  

  
  
    您的浏览器不支持canvas,请换个浏览器试试~      
  
  

下面来编写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();  };  
  
  

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

★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★