返回

Canvas基础：DIY时间定制器

前端

<p align=center></p>

<p align=center></p>

<p align=center></p>

欢迎来到 Canvas 的时间魔术世界！这次，我们将共同探索如何运用 Canvas 的非凡魔力，将一块普通的表盘幻化成一件艺术品。

**背景定制，点亮时间舞台** 

首先，告别单调的背景，为我们的时钟舞台换上别出心裁的风景。无论是繁星点点的夜空、还是活力四射的都市街景，亦或是心爱的宠物倩影，一切尽在 Canvas 的掌控之中。

**指针舞动，奏响时间乐章** 

指针，时钟的灵魂所在。在 Canvas 的妙笔下，时针、分针和秒针将被赋予灵动之姿。纤细或粗犷、简约或繁复，由你定义时间的流淌姿态。

**刻度绽放，点缀时间轨迹** 

时钟的刻度，仿佛指引着时间的航标。圆形、方形还是别致的异形，全凭你的一己心裁。让 Canvas 挥洒创意，在时间轨迹上点缀出一个个迷人的音符。

**融汇贯通，奏响时间协奏曲** 

背景、指针、刻度，三者合奏，将为你谱写一曲别致动听的时间协奏曲。每一秒的流逝，都将化作 Canvas 上的一段独特舞姿，诉说着属于你自己的时间印记。

**动手试炼，点亮 Canvas 魔力** 

准备好踏上 Canvas 的时间之旅了吗？准备好用指尖挥洒创意，让时间在 Canvas 的舞台上尽情绽放了吗？那就动手吧！

**第一步：地基初定，构筑 Canvas 舞台** 

使用`HTML5`创建一个` canvas` 元素，它将承载我们所有的时间魔法。

**HTML 片段** 
```html
<body>
  <p align=center><#code_html>
    &lt;html&gt;
    &lt;body&gt;
      &lt;!-- canvas标签画布区域 -->
      &lt;section&gt;
        &lt;h2>本地时间：&lt;span id="clock-display"&gt;00:00:00&lt;span&gt;
      &lt;section&gt;
      &lt;section&gt;
        &lt;h3&gt;用 Canvas 作图：&lt;h3&gt;
        &lt;div id="clock-face"&gt;
          &lt;!-- canvas绘制区 -->
          &lt;!-- canvas 元素将绘制我们的时钟 -->
          &lt;!-- canvas标签画布区域 -->
    &lt;section&gt;
    &lt;script src="time-wizard.js"&gt;
    &lt;script&gt;
    &lt;body&gt;
    &lt;html&gt;
  </p><#code_html></p>

时间舞台初现身，拭目以待 Canvas 妙笔

javaScript 片段

<p align=center><#code_js>
const canvas = document.getElementById('clock-face');
const context = canvas.getContext('2d');
</p><#code_js></p>

绘制 Canvas 舞台

<p align=center><#code_js>
// canvas 组件尺寸
const clockSize = 400;
const clockCenter = clockSize / 2;
</p><#code_js></p>

<p align=center><#code_js>
// 创建白色填充的圆形表盘
context.save();
context.strokeStyle = "white";
context.lineWidth = 5;
context.fill();
context.moveTo(clockCenter, clockCenter);
context.lineTo(clockCenter, clockCenter + 10);
context.closePath();
context.fill();
context.restore();
</p><#code_js></p>

指针飞舞，奏响时间乐章

<p align=center><#code_js>
const drawLine = (hour) => {
  context.save();
  context.strokeStyle = (hour % 3) === 0 ? "white" : "lightblue";
  context.lineWidth = (hour % 3) === 0 ? 4 : 1;
  const degree = (hour * 30) * (Math.PI / 180);
  context.moveTo(clockCenter, clockCenter);
  context.lineTo(clockCenter + 80, clockCenter + 100 * Math.sin( degree ) );
  context.closePath();
  context.fill();
  context.restore();
}
</p><#code_js></p>

刻度律动，点缀时间轨迹

<p align=center><#code_js>
const drawNumber = (hour) => {
  context.save();
  context.font = "bold 20px Arial";
  context.textBaseline = "top";
  context.textAlign = "center";
  const degree = (hour * 30) * (Math.PI / 180);
  const x = clockCenter + 110 * Math.cos( degree );
  const y = clockCenter + 110 * Math.sin( degree );
  context.fillText(hour === 0 ? 12 : hour, x, y);
  context.restore();
}
</p><#code_js></p>

时间流淌，诉说 Canvas 魔力

<p align=center><#code_js>
// 每秒触发，绘制时间
function updateTime() {
  context.clearRect(0, 0, clockSize, clockSize);
  const time = new Date();
  const hours = time.getHours() % 12;
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();
  document.getElementById("clock-display").textContent = formatTime( hours, minutes, seconds );
  drawLine( hours, minutes, seconds );
  drawNumber( hours, minutes, seconds );
}
setInterval(updateTime, 1000);
</p><#code_js></p>

用 Canvas 挥洒时间创意，让每一秒都与众独特！