用JavaScript实现有质感的圆形时间进度条

2023-11-14 16:48:58

前言

最近在一个项目中遇到一个需求，需要实现一个圆形的时间进度条，于是决定使用Canvas来实现它。在网上搜索了一些代码，但都不是很符合我的要求，所以我决定自己动手写一个精简版的。

实现步骤

1. 创建Canvas元素

首先，我们需要创建一个Canvas元素，并将其添加到HTML文档中。Canvas元素是一个用于在网页上绘制图形的元素。

<canvas id="canvas" width="200" height="200"></canvas>

2. 获取Canvas上下文

接下来，我们需要获取Canvas的上下文，以便能够在Canvas上绘制图形。

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

3. 绘制圆形

接下来，我们需要在Canvas上绘制一个圆形。

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

4. 绘制进度条

接下来，我们需要在圆形上绘制一个进度条。

ctx.beginPath();
ctx.arc(100, 100, 90, 0, Math.PI * 2 * (progress / 100));
ctx.stroke();

5. 设置进度条颜色

我们可以通过设置strokeStyle属性来设置进度条的颜色。

ctx.strokeStyle = "#ff0000";

6. 设置圆形颜色

我们可以通过设置fillStyle属性来设置圆形颜色。

ctx.fillStyle = "#ffffff";

7. 填充圆形

我们可以通过调用fill()方法来填充圆形。

ctx.fill();

8. 设置文本

我们可以通过设置font属性来设置文本的字体和大小。

ctx.font = "bold 20px Arial";

9. 绘制文本

我们可以通过调用fillText()方法来绘制文本。

ctx.fillText("进度条", 100, 150);

完整代码

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>

  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    // 绘制圆形
    ctx.beginPath();
    ctx.arc(100, 100, 90, 0, 2 * Math.PI);
    ctx.stroke();

    // 绘制进度条
    ctx.beginPath();
    ctx.arc(100, 100, 90, 0, Math.PI * 2 * (progress / 100));
    ctx.stroke();

    // 设置进度条颜色
    ctx.strokeStyle = "#ff0000";

    // 设置圆形颜色
    ctx.fillStyle = "#ffffff";

    // 填充圆形
    ctx.fill();

    // 设置文本
    ctx.font = "bold 20px Arial";

    // 绘制文本
    ctx.fillText("进度条", 100, 150);
  </script>
</body>
</html>