素简交织，纯粹纯粹——Canvas时钟制作入门

在画布上描绘时间：制作一个 Canvas 时钟

让数字时代的钟表黯然失色

在科技主宰的当今世界，我们早已习惯了电子时钟的便利和准确性。然而，朴实无华的指针时钟却从未退出历史舞台，它们简约的设计和纯粹的功能依然散发着永恒的魅力。今天，我们将踏上奇妙的旅程，用 Canvas 打造一款极具个性与实用性的时钟，让时间在画布上流淌。

Canvas 的魔力

Canvas 是一种强大的 HTML5 元素，它赋予我们自由挥洒创造力的画笔，在网页上绘制生动的图形。凭借其强大的功能，你可以轻松创建各种动态效果，让图像、形状和文字在画布上翩翩起舞。

构建时钟的骨架

1. 创建 Canvas 画布

<canvas id="clock" width="400" height="400"></canvas>

这将创建一个 400x400 像素的画布，为我们的时钟奠定基础。

2. 获取 Canvas 上下文

const canvas = document.getElementById("clock");
const ctx = canvas.getContext("2d");

Canvas 上下文就像一位忠实的管家，提供了绘制和操控画布所需的各种工具。

勾勒时钟的轮廓

1. 绘制表盘

ctx.beginPath();
ctx.arc(200, 200, 180, 0, 2 * Math.PI, false);
ctx.strokeStyle = "#000";
ctx.lineWidth = 10;
ctx.stroke();

这一步将绘制一个半径为 180 像素的圆形表盘，它将成为时钟的核心。

2. 绘制刻度

for (let i = 0; i < 12; i++) {
  const angle = (i * 30 * Math.PI) / 180;
  const x = 200 + 150 * Math.cos(angle);
  const y = 200 + 150 * Math.sin(angle);

  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y - 10);
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 2;
  ctx.stroke();
}

这些代码将绘制 12 个均匀分布的刻度，为时钟增添时间标记。

让时钟动起来

1. 获取当前时间

function getCurrentTime() {
  const now = new Date();
  return {
    hours: now.getHours(),
    minutes: now.getMinutes(),
    seconds: now.getSeconds(),
  };
}

这个函数就像一台时间机器，它可以准确捕捉当前时刻，并将其转化为时钟指针需要的角度。

2. 绘制指针

function drawHands(time) {
  // 计算指针的长度
  const hourLength = 100;
  const minuteLength = 120;
  const secondLength = 140;

  // 计算指针的角度
  const hourAngle = (time.hours % 12 * 30 + time.minutes / 2) * Math.PI / 180;
  const minuteAngle = (time.minutes * 6 + time.seconds / 10) * Math.PI / 180;
  const secondAngle = (time.seconds * 6) * Math.PI / 180;

  // 绘制指针
  ctx.save();
  ctx.translate(200, 200);
  ctx.rotate(hourAngle);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -hourLength);
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 5;
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.translate(200, 200);
  ctx.rotate(minuteAngle);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -minuteLength);
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 3;
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.translate(200, 200);
  ctx.rotate(secondAngle);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -secondLength);
  ctx.strokeStyle = "#f00";
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.restore();
}

这些代码赋予了时钟生命力，根据当前时间计算出指针的角度，并在画布上描绘出它们的摆动。

3. 循环更新时钟

function updateClock() {
  const time = getCurrentTime();
  drawHands(time);

  setTimeout(updateClock, 1000);
}

updateClock();

这是一台不懈工作的引擎，每隔一秒就会重新获取时间，更新指针的位置，让时钟在画布上生生不息。

结语

就这样，我们成功打造了一款简约而实用的 Canvas 时钟。它或许没有数字时钟那么炫目，但它却拥有独特的手工质感，为你的桌面或网页增添一抹怀旧的魅力。而且，你已经掌握了 Canvas 的基本原理，这将为你的创意之旅打开无限可能。

常见问题解答

1. 如何更改时钟的颜色和样式？

修改时钟的外观非常简单。只需在代码中调整 ctx.strokeStyle 和 ctx.lineWidth 的值即可。

2. 如何让指针平滑移动？

使用 requestAnimationFrame 函数可以实现更平滑的指针动画。它会根据浏览器的刷新率更新动画，从而创造出更加流畅的效果。

3. 如何添加秒表功能？

在 drawHands 函数中添加以下代码，即可实现秒表功能：

ctx.beginPath();
ctx.arc(200, 200, 150, 0, 2 * Math.PI, false);
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.stroke();

4. 如何保存时钟截图？

可以使用 canvas.toDataURL() 方法将时钟截图保存为图像文件。

5. 如何让时钟响应窗口大小变化？

在 updateClock 函数中添加以下代码，即可让时钟自动适应窗口大小：

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;