如何使用Context Arc方法创建右侧带缺口的Canvas圆形图像

我懂你现在的需求——把当前完整的圆形Canvas进度条改成右侧带缺口的样式对吧？核心就是调整Canvas中arc()方法的起始/结束角度，以及路径绘制逻辑，我给你一步步拆解并给出修改后的代码：

关键原理说明 #

Canvas的arc(x, y, radius, startAngle, endAngle, anticlockwise)方法默认是从0弧度（右侧）开始，顺时针绘制到2π弧度（回到右侧），形成完整圆形。要做出右侧缺口，我们需要：

1. 预留一段固定角度的缺口区域（比如36度）
2. 让背景圆环和进度圆环都只绘制避开缺口区域的部分

修改后的完整代码 #

<div class="cv_prog_bar_round" id="cv_prog_bar_round" data-percent="10"></div>

<script>
var el = document.getElementById('cv_prog_bar_round');
// 配置参数，可根据需求调整
var options = {
  percent: parseInt(el.getAttribute('data-percent')) || 0,
  size: parseInt(el.getAttribute('data-size')) || 135,
  lineWidth: parseInt(el.getAttribute('data-linewidth')) || 10,
  bgColor: '#e0e0e0', // 背景圆环颜色
  progressColor: '#2196F3', // 进度条颜色
  gapAngle: 0.2 * Math.PI // 右侧缺口角度，0.2π对应36度，数值越大缺口越宽
};

// 创建Canvas并挂载到目标元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
el.appendChild(canvas);

// 将画布原点移到中心，方便绘制
ctx.translate(options.size / 2, options.size / 2);
// 计算圆环半径（减去线宽一半，避免线条超出画布）
var radius = (options.size - options.lineWidth) / 2;
// 起始角度：让缺口居中在右侧
var startAngle = options.gapAngle / 2;
// 背景圆环的结束角度：避开右侧缺口
var bgEndAngle = 2 * Math.PI - options.gapAngle / 2;
// 进度圆环的结束角度：根据百分比计算进度长度
var progressEndAngle = startAngle + (2 * Math.PI - options.gapAngle) * (options.percent / 100);

// 绘制背景圆环
ctx.beginPath();
ctx.arc(0, 0, radius, startAngle, bgEndAngle);
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.bgColor;
ctx.stroke();

// 绘制进度圆环
ctx.beginPath();
ctx.arc(0, 0, radius, startAngle, progressEndAngle);
ctx.strokeStyle = options.progressColor;
ctx.stroke();
</script>

可调参数说明 #

• *gapAngle*：控制右侧缺口的宽度，比如改成0.3 * Math.PI就是54度的缺口，数值越小缺口越窄
• 如果需要调整缺口位置（比如顶部/左侧），只需要修改startAngle的初始值：比如顶部缺口可以设置startAngle = Math.PI + options.gapAngle / 2

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