返回

Canvas从零到一绘制一个完整的时钟

前端

最近我一直在学习canvas基础语法，也复习了一些三角函数知识，于是决定基于现有学习的知识自己摸索来实现一个时钟功能。

基础工作

这里列举一些开发中要数学公式，这里要注意的是所有用到的API都为弧度制：

  • π = 3.141592653589793
  • 弧度 = 度数 * π / 180
  • 正弦（sin）
  • 余弦（cos）
  • 正切（tan）

步骤一：创建画布

首先，我们需要创建一个画布来绘制时钟。我们可以使用HTML5的<canvas>元素来实现。

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

步骤二：获取画布上下文

接下来，我们需要获取画布的上下文。这将允许我们使用JavaScript来绘制图形和文本。

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

步骤三：绘制时钟表盘

现在，我们可以开始绘制时钟表盘了。我们将使用arc()方法来绘制一个圆形。

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

步骤四：绘制时钟刻度

接下来，我们需要绘制时钟刻度。我们将使用lineTo()和stroke()方法来绘制每一条刻度线。

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();
}

步骤五：绘制时钟指针

现在，我们可以绘制时钟指针了。我们将使用moveTo()、lineTo()和stroke()方法来绘制每根指针。

const hourHandLength = 50;
const minuteHandLength = 75;
const secondHandLength = 100;

const now = new Date();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();

const hourAngle = hour * 30 * Math.PI / 180 + minute / 2 * Math.PI / 180;
const minuteAngle = minute * 6 * Math.PI / 180 + second / 10 * Math.PI / 180;
const secondAngle = second * 6 * Math.PI / 180;

ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150 + hourHandLength * Math.cos(hourAngle), 150 + hourHandLength * Math.sin(hourAngle));
ctx.stroke();

ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150 + minuteHandLength * Math.cos(minuteAngle), 150 + minuteHandLength * Math.sin(minuteAngle));
ctx.stroke();

ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(150 + secondHandLength * Math.cos(secondAngle), 150 + secondHandLength * Math.sin(secondAngle));
ctx.stroke();

步骤六：添加文本

最后，我们可以添加一些文本来显示时钟的时间。我们将使用fillText()方法来绘制文本。

ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText(now.toLocaleTimeString(), 125, 250);

总结

现在，您已经学会了如何使用Canvas从零开始绘制一个完整的时钟。您可以根据自己的喜好来调整时钟的外观和功能。希望您能享受Canvas的乐趣！