如何在网格中放置画布圆形进度条？

<div class="grid-container">
  <canvas id="progress-bar"></canvas>
</div>

.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
}

#progress-bar {
  width: 200px;
  height: 200px;
}

const canvas = document.getElementById('progress-bar');
const context = canvas.getContext('2d');
const radius = canvas.width / 2;
const lineWidth = 10;
const progress = 0.7; // 进度，范围为0到1

function drawProgressBar() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制底部灰色圆
  context.beginPath();
  context.arc(radius, radius, radius - lineWidth, 0, 2 * Math.PI);
  context.lineWidth = lineWidth;
  context.strokeStyle = '#ccc';
  context.stroke();
  
  // 绘制进度条圆
  context.beginPath();
  context.arc(radius, radius, radius - lineWidth, -0.5 * Math.PI, (2 * progress - 0.5) * Math.PI);
  context.lineWidth = lineWidth;
  context.strokeStyle = '#ff0000';
  context.stroke();
}

drawProgressBar();