canvas 实现简单验证码

作者: 康乐芳华 | 来源:发表于2021-04-01 14:34 被阅读0次

canvas 实现简单验证码
canvas验证码的实现
canvas登录验证码生成
Canvas动态创建验证码案例
HTML5Canvas
基于canvas画板原理（H5）
验证码的实现
javascript canvas 生成验证码返回bas
Canvas
spring security 使用篇图形验证码的实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="canvas-wrapper">
    <canvas id="CANVAS" width="800" height="200">a canvas</canvas>
  </div>
</body>
</html>

  * {
      box-sizing: border-box;
      margin: 0;
    }

    #CANVAS {
      box-shadow: 0 0 0 1px tomato;
      padding: 0px;
      transform: scale(0.5);
      transform-origin: top left;
      cursor: pointer;
    }

    .canvas-wrapper {
      margin-left: 20px;
      margin-top: 20px;
    }

const numberStore = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
let numberRenderArr = [];
const numberAttributeArr = [{
          color: '#C32D62'
        }, {
          color: '#ffc107'
        }, {
          color: '#FFEB3B'
        }, {
          color: '#4caf50'  
        }, {
          color: '#cddc39'  
        }, {
          color: '#3f51b5'  
        }, {
          color: '#673ab7'  
        }];
const context = CANVAS.getContext("2d");

function generateOriginData() {
  numberRenderArr = [];
  for(let i = 0; i < numberAttributeArr.length; i++) {
    numberRenderArr.push(numberStore[parseInt(Math.random() * numberStore.length)])
  }
}

function renderData() {
  context.beginPath();
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.font = "bold 100px monaco";
  
  const gap = CANVAS.width / 2 / numberAttributeArr.length;

  numberRenderArr.forEach((v, i) => {
    context.save();
    context.fillStyle = numberAttributeArr[i].color;  // 填充颜色为红色
    // 192 / 2 / 4 = 24
    context.translate(gap * (2 * i + 1), CANVAS.height / 2);
    context.rotate((Math.random() - 0.5) * 45 * Math.PI / 180);
    context.fillText(v, 0, 0);
    context.restore();
  });
  context.closePath();
  renderSalt();
}

function renderSalt() {
  context.beginPath();
  context.strokeStyle = 'rgba(180, 180, 180, 0.8)';
  context.lineWidth = 4;
  for(let i = 0; i < 100; i++) {
    const randomX = parseInt(Math.random() * CANVAS.width);
    const randomY = parseInt(Math.random() * CANVAS.height);
    context.moveTo(randomX, randomY);
    context.lineTo(randomX + ((Math.random() - 0.5) * 30), randomY + parseInt((Math.random() - 0.5) * 30));
  }
  context.stroke();
  context.closePath();
}

function resetCode() {
  console.log(context);
  generateOriginData();
  context.clearRect(0,0,CANVAS.width,CANVAS.height);
  renderData();
}

generateOriginData();
renderData();

CANVAS.addEventListener('click', function() {
  resetCode();
})