캔버스와 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();
 };

이렇게 해서 좀 더 일반적인 인증 코드가 작성되었습니다. 간섭선 색상 무작위화, 간섭점 추가 가능, 텍스트 위치 무작위, 색상 무작위 등 최적화가 필요합니다. 서둘러서 사용해 보세요~

위 내용은 캔버스와 JS를 사용하여 인증 코드를 생성하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!