玩转 Canvas 画时钟，带你玩转 Canvas API

当谈到用 JavaScript 创建交互式图形时，Canvas 绝对是你的首选。它允许你创建具有动态效果的 2D 图形，例如时钟、游戏和动画。

Canvas 是 HTML5 中的一个元素，它提供了一个用于在网页上绘制图形的 JavaScript API。Canvas API 包含许多方法，可用于创建线条、形状、文本和图像。

在本教程中，我们将创建一个简单的时钟，以帮助你了解 Canvas 的基本知识。你将学习如何使用 Canvas API 创建圆形、线条和文本。

创建 Canvas 元素

首先，我们需要创建一个 Canvas 元素。可以在 HTML 中使用 <canvas> 标签来创建 Canvas 元素。

<canvas id="myCanvas" width="300" height="300"></canvas>

上面的代码创建一个 300 像素宽、300 像素高的 Canvas 元素。

获取 Canvas 上下文

接下来，我们需要获取 Canvas 的上下文。上下文是 Canvas 绘图的接口。它包含所有用于在 Canvas 上绘制图形的方法。

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

上面的代码获取 Canvas 元素，然后调用 getContext() 方法获取 Canvas 的上下文。

创建时钟表盘

现在，我们可以开始创建时钟表盘了。表盘是由一大一小的两个圆形构成的。

// 创建大圆形
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.stroke();

// 创建小圆形
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.stroke();

上面的代码首先创建一个大圆形，然后创建一个较小的同心圆。beginPath() 方法开始一个新的路径。arc() 方法创建一个圆弧。stroke() 方法绘制路径。

创建时钟刻度

接下来，我们需要创建时钟刻度。刻度是由 12 条线段组成的。

for (let i = 0; i < 12; i++) {
  // 计算刻度的位置
  const angle = (i * 30) * (Math.PI / 180);
  const x = 150 + 100 * Math.cos(angle);
  const y = 150 + 100 * Math.sin(angle);

  // 创建刻度线段
  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineTo(x, y);
  ctx.stroke();
}

上面的代码使用 for 循环创建 12 个刻度。angle 变量计算每个刻度的角度。x 和 y 变量计算每个刻度的坐标。beginPath() 方法开始一个新的路径。moveTo() 方法将路径移动到指定点。lineTo() 方法将路径绘制到指定点。stroke() 方法绘制路径。

创建时钟指针

现在，我们可以创建时钟指针了。指针由两条线段组成：时针和分针。

// 创建时针
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150 + 50 * Math.cos(angle), 150 + 50 * Math.sin(angle));
ctx.stroke();

// 创建分针
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150 + 75 * Math.cos(angle), 150 + 75 * Math.sin(angle));
ctx.stroke();

上面的代码首先创建时针，然后创建分针。angle 变量计算每个指针的角度。x 和 y 变量计算每个指针的坐标。beginPath() 方法开始一个新的路径。moveTo() 方法将路径移动到指定点。lineTo() 方法将路径绘制到指定点。stroke() 方法绘制路径。

更新时钟

最后，我们需要更新时钟，以便它显示当前时间。

setInterval(() => {
  // 获取当前时间
  const now = new Date();

  // 计算时针、分针和秒针的角度
  const hourAngle = (now.getHours() % 12) * 30 * (Math.PI / 180);
  const minuteAngle = now.getMinutes() * 6 * (Math.PI / 180);
  const secondAngle = now.getSeconds() * 6 * (Math.PI / 180);

  // 清除画布
  ctx.clearRect(0, 0, 300, 300);

  // 重新创建时钟表盘、刻度和指针
  createClockFace();
  createClockMarks();
  createClockHands(hourAngle, minuteAngle, secondAngle);
}, 1000);

上面的代码使用 setInterval() 方法每秒更新一次时钟。new Date() 方法获取当前时间。getHours()、getMinutes() 和 getSeconds() 方法获取当前时间的小时、分钟和秒。hourAngle、minuteAngle 和 secondAngle 变量计算时针、分针和秒针的角度。clearRect() 方法清除画布。createClockFace()、createClockMarks() 和 createClockHands() 方法重新创建时钟表盘、刻度和指针。