如何将HTML5 Canvas半圆进度条改为整圆进度条？

要把原来的半圆进度条改成整圆版本，核心是调整Canvas arc方法的角度参数，结合进度值计算绘制范围，以下是具体实现：

核心修改思路 #

• 原来的半圆效果是因为起始/结束角度限制在了45度区间，整圆需要覆盖0到2π弧度（对应0到360度）
• 将进度值（0-100）转换成弧度比例：结束角度 = (进度值/100) * 2 * Math.PI
• 先绘制灰色背景整圆，再叠加绘制对应进度的彩色圆弧

完整代码示例 #

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

<script>
const canvas = document.getElementById('progressBar');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 80; // 进度条的半径
const lineWidth = 10; // 进度条的粗细

// 绘制灰色背景圆
function drawBackground() {
  ctx.beginPath();
  // 绘制完整的背景圆：0到2π弧度
  ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
  ctx.strokeStyle = '#e0e0e0';
  ctx.lineWidth = lineWidth;
  ctx.stroke();
}

// 根据进度绘制彩色进度圆弧
function drawProgress(progress) {
  // 把进度值限制在0-100之间，避免异常
  const safeProgress = Math.min(Math.max(progress, 0), 100);
  // 转换成弧度比例
  const endAngle = (safeProgress / 100) * 2 * Math.PI;

  ctx.beginPath();
  // 从0弧度（3点钟方向）开始，绘制到计算出的结束角度
  ctx.arc(centerX, centerY, radius, 0, endAngle, false);
  ctx.strokeStyle = '#4CAF50';
  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round'; // 可选：让进度条两端呈圆角
  ctx.stroke();
}

// 可选：绘制中间的进度百分比文本
function drawProgressText(progress) {
  ctx.font = '24px Arial';
  ctx.fillStyle = '#333';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(`${Math.round(progress)}%`, centerX, centerY);
}

// 示例：绘制75%的进度
drawBackground();
drawProgress(75);
drawProgressText(75);
</script>

使用说明 #

• 直接调用drawProgress(数值)，传入0-100之间的数字即可更新进度
• 如果需要修改样式，调整radius（半径）、lineWidth（粗细）、strokeStyle（颜色）这些参数就行

内容的提问来源于stack exchange，提问作者Vicky