const canvas = document.getElementById('vetifyCanvas');
const w = canvas.width;
const h = canvas.height;
const context = canvas.getContext('2d');

let text = []; //用来存放用于随机的字符
let verifyCode = []; // 用来存放验证码

context.save(); // 保存绘图环境
context.fillStyle = randomColor(150, 200); // 设置背景为一个随机颜色
context.fillRect(0, 0, w, h); // 绘制矩形
context.textBaseline = "middle";

canvas.style.cursor = "pointer";
canvas.addEventListener('click', () => {
  context.restore(); // 恢复绘图环境

  context.save();

  verifyCode = [];
  context.fillStyle = randomColor(150, 200); // 设置背景为一个随机颜色
  context.fillRect(0, 0, w, h); // 绘制矩形
  context.textBaseline = "middle";
  generateCode(4);
  ganrao();
})

addText('a', 'z');
addText('A', 'Z');
addText('0', '9');

generateCode(4);
ganrao();

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min); // 生成一个随机数
}

function randomColor(min, max) {
  const r = randomNum(min, max);
  const g = randomNum(min, max);
  const b = randomNum(min, max);
  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

function addText(start, end) { // 添加用于随机的字符
  for (let i = start.charCodeAt(); i <= end.charCodeAt(); i += 1) { // 根据ASCII字符得到ASCII值
    text.push(String.fromCharCode(i)); // 根据ASCII值获得ASCII字符
  }
}

function generateCode(num) { // 生成验证码
  for (let i = 0; i < num; i++) {
    let index = randomNum(0, text.length - 1);
    verifyCode.push(text[index]);

    let x = (w / 5) * i; // 用来控制开始写字的坐标
    let y = h / 2;

    context.shadowOffsetX = randomNum(-3, 3);
    context.shadowOffsetY = randomNum(-3, 3);
    context.shadowBlur = randomNum(-3, 3);
    context.shadowColor = 'rgba(0, 0, 0, 0.3)';

    context.font = randomNum(h / 2, h) + 'px SimHei'; // 随机生成字体大小
    context.fillStyle = randomColor(100, 200); // 随机生成字体颜色

    const deg = randomNum(-20, 20);

    context.translate(x, y); // 设置坐标原点和旋转角度
    context.rotate(deg * Math.PI / 180);
    context.fillText(text[index], 0, 0); // 写字
    context.translate(-x, -y); // 恢复坐标原点和旋转角度
    context.rotate(-deg * Math.PI / 180);
  }

}

function ganrao() {
  /** 绘制干扰线* */
  // for (var i = 0; i < 4; i++) {
  //   context.strokeStyle = randomColor(40, 180);
  //   context.beginPath();
  //   context.moveTo(randomNum(0, w), randomNum(0, h));
  //   context.lineTo(randomNum(0, w), randomNum(0, h));
  //   context.stroke();
  // }
  // /** 绘制干扰点* */
  for (var i = 0; i < w / 4; i++) {
    context.fillStyle = randomColor(0, 255);
    context.beginPath();
    context.arc(randomNum(0, w), randomNum(0, h), 1, 0, 2 * Math.PI);
    context.fill();
  }
}