返回

用Canvas 绘制五彩斑斓的圆环倒计时，让时间流淌如画卷

前端

圆环倒计时的魅力

想象一下一个色彩斑斓的圆环，它随着时间的流逝而逐渐缩小，以一种优雅而引人入胜的方式描绘着时间的流逝。借助 Canvas 的强大功能，我们可以实现这种视觉奇观，创造一个既美观又实用的倒计时器。

需求分析

为了设计一个有效的圆环倒计时，我们需要考虑以下需求：

  • 用户可以自定义倒计时的结束时间。
  • 圆环应呈现渐变色，以增强视觉吸引力。
  • 倒计时的动画应流畅运行，避免卡顿或跳跃。

实现技术

为了实现这些需求，我们将采用以下技术：

  • HTML5 Canvas：用于绘制圆环和动画。
  • JavaScript：用于处理用户交互和时间管理。
  • CSS3：用于样式和美化界面。

实现过程

1. 创建 Canvas 元素

<canvas id="countdown-canvas"></canvas>

2. 获取 Canvas 上下文

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

3. 设置倒计时结束时间

const endTime = new Date("December 31, 2023 23:59:59");

4. 设置渐变色

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "#FF0000");
gradient.addColorStop(0.25, "#FF7F00");
gradient.addColorStop(0.5, "#FFFF00");
gradient.addColorStop(0.75, "#00FF00");
gradient.addColorStop(1, "#0000FF");

5. 绘制圆环

const drawCircle = (percentage) => {
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2);
  ctx.strokeStyle = gradient;
  ctx.lineWidth = 10;
  ctx.lineCap = "round";
  ctx.stroke();
  ctx.closePath();

  // 绘制填充圆环
  ctx.beginPath();
  ctx.arc(
    canvas.width / 2,
    canvas.height / 2,
    canvas.width / 2,
    Math.PI * 1.5,
    Math.PI * 2 * percentage + Math.PI * 1.5
  );
  ctx.fillStyle = gradient;
  ctx.fill();
  ctx.closePath();
};

6. 更新圆环

const updateCircle = (timestamp) => {
  const currentTime = new Date();
  const elapsedTime = endTime - currentTime;
  const percentage = 1 - elapsedTime / (endTime - startTime);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawCircle(percentage);

  if (elapsedTime > 0) {
    requestAnimationFrame(updateCircle);
  }
};

7. 启动动画

const startTime = new Date();
updateCircle();

全源码

以下提供完整的源码：

<!DOCTYPE html>
<html>
  <head>
    
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      #countdown-canvas {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="countdown-canvas"></canvas>
    <script>
      const endTime = new Date("December 31, 2023 23:59:59");
      const canvas = document.getElementById("countdown-canvas");
      const ctx = canvas.getContext("2d");

      const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
      gradient.addColorStop(0, "#FF0000");
      gradient.addColorStop(0.25, "#FF7F00");
      gradient.addColorStop(0.5, "#FFFF00");
      gradient.addColorStop(0.75, "#00FF00");
      gradient.addColorStop(1, "#0000FF");

      const drawCircle = (percentage) => {
        ctx.beginPath();
        ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2);
        ctx.strokeStyle = gradient;
        ctx.lineWidth = 10;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();

        // 绘制填充圆环
        ctx.beginPath();
        ctx.arc(
          canvas.width / 2,
          canvas.height / 2,
          canvas.width / 2,
          Math.PI * 1.5,
          Math.PI * 2 * percentage + Math.PI * 1.5
        );
        ctx.fillStyle = gradient;
        ctx.fill();
        ctx.closePath();
      };

      const updateCircle = (timestamp) => {
        const currentTime = new Date();
        const elapsedTime = endTime - currentTime;
        const percentage = 1 - elapsedTime / (endTime - startTime);

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawCircle(percentage);

        if (elapsedTime > 0) {
          requestAnimationFrame(updateCircle);
        }
      };

      const startTime = new Date();
      updateCircle();
    </script>
  </body>
</html>

结语

通过使用 Canvas 的强大功能，我们创造了一个色彩斑斓、动态十足的圆环倒计时，它将时间流逝转化为一幅视觉盛宴。这种技术在创建倒计时、进度条和其他涉及时间展示的交互式元素方面有着广泛的应用。