首页 > 代码库 > 使用canvas及js简单生成验证码方法

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

2024-09-13 00:01:05   215人阅读

我们在做开发的时候会经常涉及到验证码，前端的验证码需要用到HTML5中的canvas的知识点，然后再结合js来控制验证数字就可以达到验证码的效果了.

  1. 随机生成一张canvas画布
  2. 生成随机验证码
  3. 在画布中随机生成干扰线
  4. 把随机验证码放到画布上面
  5. 点击更换验证码

结构与样式：

1 <style>
2       #mycanvas{
3                   cursor: pointer;/*光标为手型*/
4                 }
5 </style>
6     </head>
7     <body>
8         <canvas id="mycanvas" width=‘500‘ height=‘100‘></canvas>

js代码：

/*生成4位随机数*/
 function rand(){
  var str="abcdefghijklmnopqrstuvwxyz0123456789";
  var arr=str.split("");
  var validate="";
  var ranNum;
  for(var i=0;i<5;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();
 };

效果图：

技术分享

大功告成，假如你不喜欢背景颜色或者线条的颜色可以稍微更改。

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


联系
我们