class Clock {
  constructor(ele) {
    this.ctx = ele.getContext('2d');
    this.ctx.translate(150, 150);
  }

  draw() {
    const drawClock = () => {
      this.ctx.clearRect(-150, -150, 300, 300); // 清除画布
      this.drawCircle(); // 绘制时钟的表框
      this.drawCalibration(); // 绘制时钟的刻度
      this.drawPoints(); // 绘制时钟的指针
      window.requestAnimationFrame(drawClock);
    }
    window.requestAnimationFrame(drawClock); // 添加定时器
  }

  // 绘制时钟的表框
  drawCircle() {
    const { ctx } = this;
    ctx.save();
    ctx.beginPath()
    ctx.arc(0, 0, 100, 0, 2 * Math.PI); // 绘制圆形路径，半径为100，度数为360度
    ctx.lineWidth = 5; // 设置线的宽度
    ctx.strokeStyle = '#00B0F0';
    ctx.closePath()
    ctx.stroke();
    ctx.restore();
  }

  // 绘制时钟的刻度
  drawCalibration() {
    const { ctx } = this;
    ctx.save();
    const rotateStep = Math.PI * 2 / 60; // 共计60个刻度，计算每次绘制需要旋转的弧度
    for (let i = 0; i < 60; i ++) {
      ctx.beginPath()
      if (i % 5 === 0) { // 此次轮到“小时”的刻度
        ctx.moveTo(0, -80);
        ctx.strokeStyle = '#00B0F0';
        ctx.lineWidth = 3;
      } else { // 此次绘制“分钟”的刻度
        ctx.moveTo(0, -85);
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 1;
      }
      ctx.lineTo(0, -90)
      ctx.closePath()
      ctx.stroke()
      ctx.rotate(rotateStep)
    }
    ctx.restore();
  }

  // 绘制时钟的指针
  drawPoints() {
    const now = new Date();
    let hour = now.getHours() % 12;
    let minute = now.getMinutes();
    let second = now.getSeconds();

    // 计算指针旋转角度
    const secondRotate = second * (2 * Math.PI / 60);
    const minuteRotate = minute * (2 * Math.PI / 60) + secondRotate / 60;
    const hourRotate = hour * (2 * Math.PI / 12) + minuteRotate / 12;

    // 绘制指针
    this.drawHourPoint(hourRotate, hour);
    this.drawMinutePoint(minuteRotate, minute);
    this.drawSecondPoint(secondRotate, second);
  }

  // 绘制小时的指针
  drawHourPoint(rotate, hour) {
    const { ctx } = this;
    ctx.save();
    ctx.rotate(rotate);
    ctx.beginPath();
    ctx.moveTo(0, 10);
    ctx.lineTo(0, -30);
    ctx.closePath();
    ctx.strokeStyle = '#00B0F0';
    ctx.lineWidth = 8;
    ctx.stroke();
    ctx.restore();
  }

  // 绘制分钟的指针
  drawMinutePoint(rotate, minute) {
    const { ctx } = this;
    ctx.save();
    ctx.rotate(rotate);
    ctx.beginPath();
    ctx.moveTo(0, 10);
    ctx.lineTo(0, -50);
    ctx.closePath();
    ctx.strokeStyle = '#00B0F0';
    ctx.lineWidth = 4;
    ctx.stroke();
    ctx.restore();
  }
  
  // 绘制秒的指针
  drawSecondPoint(rotate, minute) {
    const { ctx } = this;
    ctx.save();
    ctx.rotate(rotate);
    // 绘制个小圆圈作为装饰
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = 'red';
    ctx.fill();
    // 绘制指针
    ctx.beginPath();
    ctx.moveTo(0, 10);
    ctx.lineTo(0, -70);
    ctx.closePath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.restore();
  }

}

new Clock(document.getElementById('canvas')).draw();