Composition-Api + Typescript 携手 Vue2.6x，畅享精美仿生时钟

在这瞬息万变的数字时代，时间仿佛成了指尖掠过的光阴，稍纵即逝。然而，在虚拟世界的怀抱中，我们可以让时间凝固为一幅优美的画卷，打造一款仿真时钟，让时间变得触手可及，任凭我们赏玩把弄。

Vue2.6x ，一款老牌而常新的前端开发利器，以其简洁的语法、丰富的组件库和强大的扩展性，牢牢占据着前端开发的一席之地。当它与Composition-Api 和Typescript 强强联合，更是如虎添翼。Composition-Api带来了一种全新的响应式状态管理方式，使代码更加简洁易读，而Typescript的类型检查则为代码保驾护航，避免了许多潜在的错误。

<template>
  <div class="clock">
    <canvas ref="canvas" class="canvas"></canvas>
  </div>
</template>

1. 绘制表盘

const drawCircle = (ctx, radius, lineWidth, color, x, y) => {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  ctx.stroke();
};

我们首先绘制表盘，也就是一个圆形。这个圆形由一个Canvas元素来呈现，可以通过ctx.arc()方法来绘制。其中，radius是圆的半径，lineWidth是圆的线宽，color是圆的颜色，x和y是圆心的坐标。

const drawNumber = (ctx, number, radius, lineWidth, color, x, y) => {
  ctx.beginPath();
  ctx.font = `${lineWidth}px Arial`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = color;
  ctx.fillText(number, x, y);
};

2. 绘制数字

接下来，我们需要在表盘上绘制数字。数字的位置和大小是固定的，我们可以使用ctx.fillText()方法来绘制。其中，number是数字本身，radius是表盘的半径，lineWidth是数字的线宽，color是数字的颜色，x和y是数字的坐标。

const drawH = (ctx, hour, radius, lineWidth, color, x, y) => {
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  const angle = (hour % 12) * (2 * Math.PI / 12) + (minute / 60) * (2 * Math.PI / 12);
  const length = radius * 0.5;
  const x1 = x + Math.cos(angle) * length;
  const y1 = y + Math.sin(angle) * length;
  ctx.moveTo(x, y);
  ctx.lineTo(x1, y1);
  ctx.stroke();
};

3. 绘制指针

最后，我们需要绘制指针。指针的位置和长度是可变的，我们需要根据当前的时间来计算指针的坐标。我们可以使用ctx.lineTo()方法来绘制指针。其中，hour是当前的小时，radius是表盘的半径，lineWidth是指针的线宽，color是指针的颜色，x和y是指针的坐标。

const drawM = (ctx, minute, radius, lineWidth, color, x, y) => {
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  const angle = (minute % 60) * (2 * Math.PI / 60);
  const length = radius * 0.7;
  const x1 = x + Math.cos(angle) * length;
  const y1 = y + Math.sin(angle) * length;
  ctx.moveTo(x, y);
  ctx.lineTo(x1, y1);
  ctx.stroke();
};

const drawS = (ctx, second, radius, lineWidth, color, x, y) => {
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  const angle = (second % 60) * (2 * Math.PI / 60);
  const length = radius * 0.9;
  const x1 = x + Math.cos(angle) * length;
  const y1 = y + Math.sin(angle) * length;
  ctx.moveTo(x, y);
  ctx.lineTo(x1, y1);
  ctx.stroke();
};

本实例就是利用了这三大技术，共同开发了这款仿真时钟。程序的整体思路非常清晰，首先是创建一个Canvas元素，然后调用ctx.arc()方法来绘制表盘。接下来，调用ctx.fillText()方法来绘制数字。最后，调用ctx.lineTo()方法来绘制指针。整个程序逻辑严谨，代码简洁易懂。