音乐播放器圆形进度条

您可以使用 Canvas 绘制一个圆形进度条，具体实现步骤如下：

1. 在 HTML 中添加一个 Canvas 元素，并设置宽高和 ID：

<canvas id="progress" width="100" height="100"></canvas>

2. 在 JavaScript 中获取 Canvas 元素和绘图上下文：

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

3. 绘制圆形底部：

ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 40, 0, 2 * Math.PI);
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 10;
ctx.stroke();

4. 绘制圆形进度条：

ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 40, -0.5 * Math.PI, (progress / 100) * 2 * Math.PI - 0.5 * Math.PI);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 10;
ctx.stroke();

其中，`progress` 表示当前进度，取值范围为 0 到 100。

完整代码如下：

<canvas id="progress" width="100" height="100"></canvas>

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

function drawProgress(progress) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 40, 0, 2 * Math.PI);
  ctx.strokeStyle = '#ccc';
  ctx.lineWidth = 10;
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 40, -0.5 * Math.PI, (progress / 100) * 2 * Math.PI - 0.5 * Math.PI);
  ctx.strokeStyle = '#f00';  ctx.lineWidth = 10;
  ctx.stroke();
}

drawProgress(50); // 绘制进度为 50% 的进度条