JavaScript Canvas 인증 코드 구현

7286 단어 jscanvas인증번호
일반적인 로그 인 인터페이스 에서 우 리 는 인증 코드 를 볼 수 있다.인증 코드 의 역할 은 사람 이 조작 하 는 지 아 닌 지 를 검사 하고 기계 등 비인간 적 인 조작 을 방지 하 며 데이터 베이스 가 쉽게 무 너 지 는 것 을 방지 하 는 것 이다.
인증 코드 는 보통 PHP 와 자바 등 백 엔 드 언어 로 작 성 됩 니 다.
하지만 전면 에 서 는 canva 나 SVG 로 인증 코드 를 그 릴 수 있 습 니 다.
인증 코드 를 그 리 는 것 은 간단 한 무 작위 문자열 이 아니 라 화면 에 방해 항목 이 있어 야 합 니 다.
예 를 들 어 간섭 선분,간섭 원점,배경 등 이다.
이곳 의 이 demo 의 canvas 인증 코드 방해 항목 은 비교적 간단 하 다.
그림 에서 본 사례 의 간섭 항목 을 볼 수 있다.
canvas 인증 코드 전시 효과:
클릭 하여 변경(다시 그리 기)인증 코드 구현:

콘 솔 에서 함수 출력 반환 값 을 실행 합 니 다(인증 코드):

원본 코드:

 <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas   </title>
</head>

<body>
 <canvas width="200" height="60" id="check" style="border:1px solid #000;">        canvas  ！</canvas>
 <script>
 var ctx = document.getElementById("check").getContext("2d");
 var ctxW = document.getElementById("check").clientWidth;
 var ctxH = document.getElementById("check").clientHeight;

 /**
  *                 
  * @param {[Number]} min [       ]
  * @param {[Number]} max [       ]
  * @return {[Number]} [            ]
  */
 function ranNum(min, max) {

  return Math.random() * (max - min) + min;

 }

 /**
  *                 
  * @param {[Number]} min [    ]
  * @param {[Number]} max [    ]
  * @return {[String]} [    ]
  */
 function ranColor(min, max) {

  var r = ranNum(min, max);

  var g = ranNum(min, max);

  var b = ranNum(min, max);

  // return "rgb(" + r + "," + g + "," + b + ")";
  return `rgb(${r},${g},${b})`;

 }

 /**
  *        
  * @return {[Array]} [    ]
  */
 function ranStr() {

  var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";

  return str.split("").sort(function () {
  return Math.random() - 0.5
  });

 }

 /**
  *        
  * @param {[String]} canvasId [canvas id]
  * @param {[Number]} canvasW [canvas width]
  * @param {[Number]} canvasH [canvas height]
  * @param {[Number]} num [        ]
  * @param {[Number]} fsMin [      ]
  * @param {[Number]} fsMax [      ]
  * @param {[Number]} frMin [        ]
  * @param {[Number]} frMax [        ]
  * @param {[Number]} min [    ]
  * @param {[Number]} max [    ]
  * @return {[String]} [     ]
  */
 function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {

  var str = "";

  for (var i = 0; i < num; i++) {

  var char = ranStr()[Math.floor(0, ranStr().length)];

  var fs = ranNum(fsMin, fsMax);

  canvasId.font = fs + "px Verdana";

  canvasId.fillStyle = ranColor(min, max);

  //        
  canvasId.save();

  // context.translate(x,y);
  // x        （x）   
  // y        （y）   
  //   
  canvasId.translate(canvasW / num * i + canvasW / 20, 0);

  //     
  canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);

  // context.fillText(text,x,y,maxWidth);
  // text            。
  // x         x     （     ）。
  // y         y     （     ）。
  // maxWidth   。         ，    。
  canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);

  //                
  ctx.restore();

  str += char;

  }

  // console.log(str);
  return str;

 }

 /**
  *     
  * @param {[String]} canvasId [canvas id]
  * @param {[Number]} canvasW [canvas width]
  * @param {[Number]} canvasH [canvas height]
  * @param {[Number]} min [  ]
  * @param {[Number]} max [  ]
  */
 function drawBg(canvasId, canvasW, canvasH, min, max) {

  //   canvas  
  canvasId.fillStyle = ranColor(min, max);

  //     
  canvasId.fillRect(0, 0, canvasW, canvasH);

 }

 /**
  *        
  * @param {[String]} canvasId [canvas id]
  * @param {[Number]} canvasW [canvas width]
  * @param {[Number]} canvasH [canvas height]
  * @param {[Number]} num [     ]
  * @param {[Number]} r [    ]
  * @param {[Number]} min [  ]
  * @param {[Number]} max [  ]
  */
 function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {

  for (var i = 0; i < num; i++) {

  //      （   ）
  canvasId.beginPath();

  // context.arc(x,y,r,sAngle,eAngle,counterclockwise); （  ）
  // x       x   。
  // y       y   。
  // r     。
  // sAngle    ，    。（            0  ）。
  // eAngle    ，    。
  // counterclockwise   。              。False =    ，true =    。
  canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);

  //     
  canvasId.fillStyle = ranColor(min, max);

  //   
  canvasId.fill();

  //      （   ）
  canvasId.closePath();

  }

 }

 /**
  *        
  * @param {[String]} canvasId [canvas id]
  * @param {[Number]} canvasW [canvas width]
  * @param {[Number]} canvasH [canvas height]
  * @param {[Number]} num [     ]
  * @param {[Number]} min [  ]
  * @param {[Number]} max [  ]
  */
 function drawLine(canvasId, canvasW, canvasH, num, min, max) {

  for (var i = 0; i < num; i++) {

  //      （   ）
  canvasId.beginPath();

  //      
  canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));

  //      
  canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));

  canvasId.strokeStyle = ranColor(min, max);

  canvasId.stroke();

  canvasId.closePath();

  }

 }

 //      
 function drawCanvas() {

  //   canvas
  ctx.clearRect(0, 0, 200, 60);

  //     
  drawBg(ctx, ctxW, ctxH, 200, 255);

  //       
  drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);

  //       
  drawLine(ctx, ctxW, ctxH, 20, 0, 255);

  //      
  var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);

  return str;

 }

 drawCanvas();

 document.getElementById('check').onclick = drawCanvas;
 </script>
</body>

</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Vue 접 기 효과 구현 예시 코드
JS 사각형 추첨 효과 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage