教你用Canvas实现环状类地铁时刻图，新手也能轻松上手！

2023-04-10 01:01:16

用 Canvas 打造环状地铁时刻图

创建画布

踏入创建环状地铁时刻表的旅程，首先要准备一个画布。使用文本编辑器创建一个 HTML 文件，并添加画布元素。务必记住，您需要包含 Canvas 库才能让画布正常运行。

绘制圆环

有了画布，就开始在上面绘制一个圆环。使用 Canvas 的 arc() 方法，指定圆环的中心、半径和起始和结束角度。

ctx.beginPath();
ctx.arc(250, 250, 200, 0, 2 * Math.PI);
ctx.stroke();

添加刻度

环形时刻表需要清晰可见的刻度，因此我们需要添加它们。使用循环来绘制等距的刻度线。

for (var i = 0; i < 12; i++) {
  var angle = i * Math.PI / 6;
  var x = 250 + 200 * Math.cos(angle);
  var y = 250 + 200 * Math.sin(angle);

  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + 10, y);
  ctx.stroke();
}

添加数字

刻度清晰了，现在是时候添加数字了。这将有助于用户轻松读懂时间。

for (var i = 0; i < 12; i++) {
  var angle = i * Math.PI / 6;
  var x = 250 + 220 * Math.cos(angle);
  var y = 250 + 220 * Math.sin(angle);

  ctx.fillStyle = 'black';
  ctx.font = '12px Arial';
  ctx.fillText(i + 1, x, y);
}

添加地铁站

为了让时刻表与地铁相关，让我们添加地铁站。使用循环在圆环上绘制车站名称。

var stations = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];

for (var i = 0; i < stations.length; i++) {
  var angle = i * Math.PI / 6;
  var x = 250 + 180 * Math.cos(angle);
  var y = 250 + 180 * Math.sin(angle);

  ctx.fillStyle = 'red';
  ctx.font = '14px Arial';
  ctx.fillText(stations[i], x, y);
}

添加地铁时刻表

最后，我们来到了最重要的部分：添加地铁时刻表。类似于车站，使用循环在圆环上绘制时间。

var times = ['8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '1:00', '1:30'];

for (var i = 0; i < times.length; i++) {
  var angle = i * Math.PI / 6;
  var x = 250 + 250 * Math.cos(angle);
  var y = 250 + 250 * Math.sin(angle);

  ctx.fillStyle = 'blue';
  ctx.font = '12px Arial';
  ctx.fillText(times[i], x, y);
}