用canvas做一个环形进度条

创建一个环形进度条通常会使用HTML5的Canvas API，它提供了一个二维画布，可以用于绘制图形。以下是一个简单的步骤来制作环形进度条：

1. **HTML结构**:
首先，在HTML中添加一个canvas元素作为容器，并给它一个id，如`<canvas id="progress-circle"></canvas>`。

2. **CSS样式**:
确保canvas元素有合适的大小，并设置其背景颜色为透明，以便可以看到背景。

<style>
#progress-circle {
  display: inline-block;
  width: 200px; /* 根据需求调整宽度 */
  height: 200px; /* 根据需求调整高度 */
  background-color: rgba(255, 255, 255, 0); /* 背景透明 */
}
</style>

3. **JavaScript (Canvas API)**:
使用JavaScript获取canvas上下文，然后计算圆心、半径和进度的角度。下面是一个基础函数的例子，假设进度是0到100之间：

var canvas = document.getElementById('progress-circle');
var ctx = canvas.getContext('2d');

function drawProgress(progress) {
  var radius = Math.min(canvas.width, canvas.height) / 2;
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  
  // 绘制未填充的圆环
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.stroke();

  // 绘制进度部分
  var progressAngle = progress * (2 * Math.PI) / 100;
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius - 10, progressAngle, progressAngle + 0.1); // 减去一些像素留出边框
  ctx.fillStyle = 'blue'; // 进度颜色
  ctx.fill();
}

// 示例中进度为60%
drawProgress(60);

4. **动态更新**:
如果需要进度实时变化，可以在适当的地方调用`drawProgress()`函数，传入新的进度值。