以艺术之名，用 Canvas 绘制你的时间

2023-09-01 18:45:49

用 Canvas 创造一幅时间的艺术画卷

在我们的数字世界中，时间早已被分割成一个个精准的刻度，机械地记录着我们的生活。但在纷繁复杂的时代背景下，我们是否可以跳出这种刻板的框架，用艺术的方式重新定义时间？答案是肯定的，通过利用 Canvas，我们能够创造一幅精美的时钟艺术画卷，为你的数字世界增添一抹独特的风景。

绘制艺术时钟的步骤

1. 构建画布

首先，我们需要创建一个 <canvas> 元素作为我们的时钟画布。

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

2. 绘制圆形

接下来，我们用 beginPath() 和 arc() 方法绘制圆形，作为时钟的基本结构。

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

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

3. 绘制数字

数字是时钟上的关键元素，利用 fillText() 方法，根据数字位置和弧度绘制数字。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const radius = 150;
const radians = 2 * Math.PI / numbers.length;

for (let i = 0; i < numbers.length; i++) {
  const x = 200 + radius * Math.cos(radians * i);
  const y = 200 + radius * Math.sin(radians * i);

  ctx.fillText(numbers[i], x, y);
}

4. 绘制指针

指针是动态更新的元素，需要根据时间计算角度并绘制。

const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

// 计算时针角度
const hoursAngle = (hours % 12) * (2 * Math.PI / 12) + (minutes / 60) * (2 * Math.PI / 12);

// 绘制时针
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200 + 100 * Math.cos(hoursAngle), 200 + 100 * Math.sin(hoursAngle));
ctx.stroke();

// 计算分针角度
const minutesAngle = (minutes % 60) * (2 * Math.PI / 60) + (seconds / 60) * (2 * Math.PI / 60);

// 绘制分针
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200 + 120 * Math.cos(minutesAngle), 200 + 120 * Math.sin(minutesAngle));
ctx.stroke();

// 计算秒针角度
const secondsAngle = seconds * (2 * Math.PI / 60);

// 绘制秒针
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(200 + 150 * Math.cos(secondsAngle), 200 + 150 * Math.sin(secondsAngle));
ctx.strokeStyle = "#FF0000"; // 设置秒针颜色为红色
ctx.stroke();