喵星人的专属时计：用 Canvas 绘制猫咪表盘

猫咪表盘制作指南

准备好迎接一段激动人心的旅程，我们将共同用 Canvas 为我们的猫咪伙伴创造一个独一无二的时计。

材料清单：

• 一双灵巧的双手
• 一个活跃的想象力
• HTML5 Canvas

步骤 1：绘制表盘

首先，创建一个用于绘制表盘的 Canvas。设置画布的尺寸和背景色，然后使用 arc() 方法绘制一个圆圈作为表盘的轮廓。

<canvas id="clock-face" width="300px" height="300px"></canvas>

<script>
  const canvas = document.getElementById('clock-face');
  const ctx = canvas.getContext('2d');

  // 设置背景色
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制表盘
  ctx.beginPath();
  ctx.arc(150, 150, 140, 0, 2 * Math.PI);
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 5;
  ctx.stroke();
</script>

步骤 2：绘制刻度

接下来，我们需要在表盘上添加时针刻度。为此，我们使用 moveTo() 和 lineTo() 方法绘制 12 条直线，从表盘中心向外辐射。

<script>
  // 绘制时针刻度
  for (let i = 0; i < 12; i++) {
    const angle = (i * Math.PI) / 6;
    ctx.beginPath();
    ctx.moveTo(150 + 130 * Math.cos(angle), 150 + 130 * Math.sin(angle));
    ctx.lineTo(150 + 140 * Math.cos(angle), 150 + 140 * Math.sin(angle));
    ctx.stroke();
  }
</script>

步骤 3：绘制时针

现在，是时候添加时针了。创建一个新的 Canvas 用于绘制时针，并使用 beginPath()、moveTo() 和 lineTo() 方法绘制一个三角形。

<canvas id="hour-hand" width="100px" height="100px"></canvas>

<script>
  const hourCanvas = document.getElementById('hour-hand');
  const hourCtx = hourCanvas.getContext('2d');

  // 绘制时针
  hourCtx.beginPath();
  hourCtx.moveTo(50, 10);
  hourCtx.lineTo(90, 50);
  hourCtx.lineTo(10, 50);
  hourCtx.fillStyle = '#000000';
  hourCtx.fill();
</script>

步骤 4：绘制分针

重复上述步骤，但使用不同的尺寸和颜色绘制分针。

<canvas id="minute-hand" width="100px" height="100px"></canvas>

<script>
  const minuteCanvas = document.getElementById('minute-hand');
  const minuteCtx = minuteCanvas.getContext('2d');

  // 绘制分针
  minuteCtx.beginPath();
  minuteCtx.moveTo(50, 10);
  minuteCtx.lineTo(90, 50);
  minuteCtx.lineTo(10, 50);
  minuteCtx.fillStyle = '#ff0000';
  minuteCtx.fill();
</script>

步骤 5：绘制秒针

最后，用同样的技术绘制秒针，但使用更细的线宽和更鲜艳的颜色。

<canvas id="second-hand" width="100px" height="100px"></canvas>

<script>
  const secondCanvas = document.getElementById('second-hand');
  const secondCtx = secondCanvas.getContext('2d');

  // 绘制秒针
  secondCtx.beginPath();
  secondCtx.moveTo(50, 10);
  secondCtx.lineTo(90, 50);
  secondCtx.lineTo(10, 50);
  secondCtx.fillStyle = '#00ff00';
  secondCtx.fill();
</script>

步骤 6：动画

为了让时钟运转起来，我们需要使用 JavaScript 定期更新时针、分针和秒针的位置。

<script>
  // 获取时间
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 计算时针、分针和秒针的角度
  const hourAngle = (hours % 12) * 30 + (minutes / 60) * 6;
  const minuteAngle = minutes * 6 + (seconds / 60) * 6;
  const secondAngle = seconds * 6;

  // 旋转时针画布
  const hourHand = document.getElementById('hour-hand');
  hourHand.style.transform = `rotate(${hourAngle}deg)`;

  // 旋转分针画布
  const minuteHand = document.getElementById('minute-hand');
  minuteHand.style.transform = `rotate(${minuteAngle}deg)`;

  // 旋转秒针画布
  const secondHand = document.getElementById('second-hand');
  secondHand.style.transform = `rotate(${secondAngle}deg)`;

  // 每秒更新时钟
  setInterval(() => {
    // 获取时间
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    // 计算时针、分针和秒针的角度
    const hourAngle = (hours % 12) * 30 + (minutes / 60) * 6;
    const minuteAngle = minutes * 6 + (seconds / 60) * 6;
    const secondAngle = seconds * 6;

    // 旋转时针画布
    const hourHand = document.getElementById('hour-hand');
    hourHand.style.transform = `rotate(${hourAngle}deg)`;

    // 旋转分针画布
    const minuteHand = document.getElementById('minute-hand');
    minuteHand.style.transform = `rotate(${minuteAngle}deg)`;

    // 旋转秒针画布
    const secondHand = document.getElementById('second-hand');
    secondHand.style.transform = `rotate(${secondAngle}deg)`;
  }, 1000);
</script>

现在，您已经拥有了一个可爱的猫咪表盘，可以随时监测时间！