如何绘制带可变描边粗细的圆形 实现内圈蓝色切片效果

你此前沿角度绘制小圆的方案出现像素化、外扩变形，是因为小圆半径增大时会超出原始圆外边界，且重叠的小圆边缘没有做抗锯齿对齐，直接改用内部扇形切片拼接的方案即可解决问题，以下是具体实现逻辑： #

核心实现步骤（以Canvas为例） #

• 固定原始圆的外半径R、圆心坐标(cx, cy)，保证最终外边缘不会出现偏移
• 将整个圆周按所需精度切分为N个等份角度区间，每份的角度步长step = 2 * Math.PI / N，精度要求越高N的取值越大
• 对每个角度区间[startAngle, endAngle]：
  1. 计算当前区间需要的描边宽度w，推导得到当前扇形的内半径r = R - w
  2. 按如下顺序绘制路径：
     • 移动到内弧起点：(cx + r * Math.cos(startAngle), cy + r * Math.sin(startAngle))
     • 绘制内弧到(cx + r * Math.cos(endAngle), cy + r * Math.sin(endAngle))
     • 直线连接到外弧起点：(cx + R * Math.cos(endAngle), cy + R * Math.sin(endAngle))
     • 绘制外弧回到外弧终点：(cx + R * Math.cos(startAngle), cy + R * Math.sin(startAngle))
  3. 闭合路径后填充目标蓝色即可
     该方案所有外弧都对齐固定的外半径R，完全不会出现外扩变形，路径绘制原生支持抗锯齿，不会有像素化问题。

可选轻量方案（SVG实现） #

如果不需要极精细的逐角度自定义粗细变化，可直接用SVG的圆形描边属性实现，设置描边向内绘制即可避免外扩：

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="none" stroke="blue"
          stroke-width="12" stroke-dasharray="25 10 15 5"
          style="stroke-alignment: inner; paint-order: stroke;"/>
</svg>

内容的提问来源于stack exchange，提问作者Mads Lee Jensen