Introduction à l'utilisation de Canvas et JS pour générer des codes de vérification

Des codes de vérification sont souvent nécessaires. Le code de vérification frontal nécessite une connaissance des points de connaissance du canevas dans HTML5. Les étapes pour générer le code de vérification sont :
1. Générer un canevas
2. Générer un code de vérification à nombre aléatoire.
3. Générez des lignes d'interférence dans le canevas.
4. Remplissez le texte du code de vérification dans le canevas.
5. Cliquez sur le canevas pour modifier le code de vérification
Structure et style :

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

Écrivez le code js ci-dessous :

/*生成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();
 };

De cette façon, un une vérification plus courante est écrite. Bien entendu, de nombreux domaines doivent être optimisés, tels que la couleur aléatoire de la ligne d'interférence, la possibilité d'ajouter des points d'interférence, la couleur aléatoire du texte à des positions aléatoires, etc. Dépêchez-vous et essayez-le ~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!