Canvas と js を使用して検証コードを生成する方法の紹介

多くの場合、検証コードが必要になります。フロントエンド検証コードには、HTML5 のキャンバス ナレッジ ポイントの知識が必要です。検証コードを生成する手順は次のとおりです。
1. キャンバスを生成します。
2. 乱数検証コードを生成します。
3. キャンバスに干渉線を生成する
4. キャンバスに確認コードのテキストを入力します。
5. キャンバスをクリックして検証コードを変更します
構造とスタイル:

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

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(&#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();
 };

このように、より一般的な検証コードが記述されている部分はもちろんたくさんあります。干渉線の色のランダム化などの最適化が必要な場合は、干渉点、テキストのランダムな位置、ランダムな色などを追加できます。急いで試してみてください~

以上がCanvas と js を使用して検証コードを生成する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。