Einführung in die Verwendung von Canvas und js zum Generieren von Bestätigungscodes

In vielen Fällen sind Verifizierungscodes erforderlich. Der Front-End-Verifizierungscode erfordert die Kenntnis der Canvas-Wissenspunkte in HTML5. Die Schritte zum Generieren des Bestätigungscodes sind:
1. Generieren Sie eine Leinwand
2. Generieren Sie einen Zufallszahlen-Verifizierungscode
3. Erzeugen Sie Interferenzlinien in der Leinwand
4. Füllen Sie den Bestätigungscodetext in die Leinwand aus
5. Klicken Sie auf die Leinwand, um den Bestätigungscode zu ändern
Struktur und Stil:

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

Schreiben Sie den folgenden 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();
 };

Auf diese Weise a Eine häufigere Überprüfung wird geschrieben. Natürlich gibt es viele Bereiche, die optimiert werden müssen, z. B. die zufällige Farbe der Interferenzlinie, die Möglichkeit, Interferenzpunkte hinzuzufügen, die zufällige Farbe des Textes an zufälligen Positionen usw. Beeilen Sie sich und probieren Sie es aus~

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Canvas und js zum Generieren von Bestätigungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!