Introduction to how to use canvas and js to generate verification codes

Verification codes are needed in many cases. The front-end verification code requires knowing the canvas knowledge points in Html5. The steps to generate the verification code are:
1. Generate a canvas
2. Generate a random number verification code
3. Generate interference lines in the canvas
4. Fill the verification code text into the canvas
5. Click on the canvas to change the verification code
Structure and style:

<canvas id="mycanvas" width=&#39;90&#39; height=&#39;40&#39;>
 您的浏览器不支持canvas，请换个浏览器试试~
</canvas>
  
<style>
#mycanvas{
 cursor: pointer;
}
</style>

Let’s write the js code:

/*生成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(&#39;mycanvas&#39;);
  var cxt=mycanvas.getContext(&#39;2d&#39;);
  cxt.fillStyle=&#39;#000&#39;;
  cxt.fillRect(0,0,90,40);
  /*生成干扰线20条*/
  for(var j=0;j<20;j++){
   cxt.strokeStyle=&#39;#fff&#39;;
   cxt.beginPath(); //若省略beginPath，则每点击一次验证码会累积干扰线的条数
    cxt.moveTo(lineX(),lineY());
   cxt.lineTo(lineX(),lineY());
   cxt.lineWidth=0.5;
   cxt.closePath();
   cxt.stroke();
  }
  cxt.fillStyle=&#39;red&#39;;
  cxt.font=&#39;bold 20px Arial&#39;;
  cxt.fillText(rand(),25,25); //把rand()生成的随机数文本填充到canvas中  
 }
 clickChange();
 /*点击验证码更换*/
 mycanvas.onclick=function(e){
  e.preventDefault(); //阻止鼠标点击发生默认的行为
  clickChange();
 };

This way you can write a more common verification code, of course There are also many areas that need to be optimized, such as the random colors of interference lines, the ability to add interference points, and the random colors of text at random positions, etc. Hurry up and try it~

The above is the detailed content of Introduction to how to use canvas and js to generate verification codes. For more information, please follow other related articles on the PHP Chinese website!