html圆形进度条

要实现一个圆形进度条，可以使用HTML5的canvas元素和JavaScript来绘制。

以下是一个简单的HTML代码，用于创建圆形进度条：

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

接下来，使用JavaScript来绘制进度条。下面是一个示例函数，用于绘制一个圆形进度条：

function drawProgress(progress) {
  var canvas = document.getElementById("progress");
  var ctx = canvas.getContext("2d");
  
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制底部圆形
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, canvas.width/3, 0, 2*Math.PI);
  ctx.strokeStyle = "#ddd";
  ctx.lineWidth = 10;
  ctx.stroke();
  
  // 绘制进度圆弧
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, canvas.width/3, -0.5*Math.PI, (-0.5+2*progress/100)*Math.PI);
  ctx.strokeStyle = "#1abc9c";
  ctx.lineWidth = 10;
  ctx.stroke();
}

这个函数接受一个参数progress，表示进度百分比。它首先清除画布，然后绘制一个底部圆形，再根据进度绘制一个圆弧。

最后，在JavaScript代码中调用这个函数，传入当前进度百分比即可：

var progress = 50; // 进度百分比
drawProgress(progress);

这样就可以实现一个简单的圆形进度条。当progress的值改变时，只需要再次调用drawProgress函数即可更新进度条。