HTML5 Canvas 绘制圆环或扇形需用 arc() 方法：一、设 lineWidth 并 stroke() 得空心圆环；二、调整 startAngle/endAngle 和 lineCap 实现带缺口进度环；三、moveTo 圆心 + lineTo 半径 + arc + lineTo 圆心 + fill() 绘实心扇形；四、两次 beginPath + arc + stroke() 叠加双色同心环；五、配置 shadow 属性增强立体感。
如果您希望在网页中使用 HTML5 Canvas 绘制圆环或扇形，需要借助 arc() 方法并结合描边与填充逻辑实现。以下是具体操作步骤：
一、绘制标准圆环（空心圆）
圆环本质是设置较粗的描边宽度，并仅描边不填充的圆形路径。需指定圆心坐标、半径、起始弧度、终止弧度及是否逆时针绘制。
1、获取 canvas 元素并调用 getContext('2d') 获取 2D 渲染上下文。
2、使用 beginPath() 开启新路径。
立即学习“前端免费学习笔记（深入）”；
3、调用 arc(x, y, radius, startAngle, endAngle, anticlockwise)，其中 startAngle 设为 0，endAngle 设为 Math.PI * 2。
4、设置 strokeStyle 指定描边颜色，lineWidth 指定描边粗细（如 20）。
5、调用 stroke() 执行描边绘制。
二、绘制带缺口的圆环（进度环）
通过调整 startAngle 与 endAngle 的值，可控制圆环的起始与结束位置，从而形成缺口效果，常用于加载进度指示。
1、保持与方法一相同的 canvas 上下文获取与路径开启步骤。
2、将 startAngle 设为 0，endAngle 设为 Math.PI * 2 * 0.75（表示 75% 圆弧）。
3、设置 lineCap 属性为 'round'，使两端呈圆角，避免尖锐截断。
4、执行 stroke() 完成绘制。
三、绘制实心扇形（填充扇区）
扇形由两条半径线和一段圆弧围成闭合区域，需使用 lineTo() 连接圆心与弧端点，并调用 fill() 填充内部。
1、调用 beginPath() 后，使用 moveTo(centerX, centerY) 将起点移至圆心。
2、用 lineTo() 绘制第一条半径线至弧起始点：x = centerX + radius * Math.cos(startAngle)，y = centerY + radius * Math.sin(startAngle)。
3、调用 arc() 绘制圆弧段，参数同前，但需确保 anticlockwise 与扇形方向一致。
4、再次使用 lineTo() 绘制第二条半径线返回圆心。
5、设置 fillStyle 并调用 fill() 完成填充。
四、叠加双色圆环（内外环组合）
通过两次独立的 arc() 调用，分别绘制不同半径与线宽的同心圆环，可实现内外双色嵌套效果，适用于状态标识或层级视觉设计。
1、第一次绘制外环：半径设为 80，lineWidth 设为 16，strokeStyle 设为 '#4a90e2'。
2、第二次绘制内环：半径设为 60，lineWidth 设为 12，strokeStyle 设为 '#f5a623'。
3、每次绘制前均需调用 beginPath() 和 arc()，并独立执行 stroke()。
五、使用阴影增强圆环立体感
为圆环添加阴影可提升视觉层次，需在绘制前配置 shadowColor、shadowBlur、shadowOffsetX 与 shadowOffsetY 属性。
1、设置 shadowColor 为 'rgba(0,0,0,0.2)' 以获得柔和灰黑阴影。
2、设置 shadowBlur 为 10 控制模糊程度。
3、设置 shadowOffsetX 与 shadowOffsetY 均为 2 实现轻微右下偏移。
4、完成阴影配置后，再执行圆环的 arc() 与 stroke() 步骤。
