Canvas绘制复杂圆弧和圆形路径的核心是组合arc()与moveTo()、lineTo()等路径方法，并严格管理路径状态；arc()是唯一基础方法，角度须用弧度，实心圆需0到2π并fill()；多段路径需beginPath()起始，用closePath()或fill()隐式闭合；环形需外顺内逆复合路径；注意lineWidth、strokeStyle等样式设置及每次绘制前调用beginPath()重置路径。
Canvas 绘制复杂圆弧和圆形路径，核心在于灵活组合 arc() 与路径控制方法（如 moveTo()、lineTo()、closePath()），并严格管理路径状态。关键不是“单个圆”，而是把圆弧当作路径的一段，和其他线段或曲线拼接成自定义形状。
用 arc() 精确控制圆弧段
arc(x, y, r, startAngle, endAngle, anticlockwise) 是绘制圆弧的唯一基础方法。所有角度必须是弧度，不是度数：
- 0° = 0，90° =
Math.PI / 2，180° =Math.PI，360° =Math.PI * 2 - 顺时针画半圆：从 0 到
Math.PI，anticlockwise = false（默认） - 逆时针画四分之一圆：从
Math.PI到Math.PI / 2，anticlockwise = true - 要画实心圆，起始角设为 0，终止角设为
Math.PI * 2，再调用fill()
把圆弧嵌入多段路径中
复杂图形往往由直线 + 圆弧 + 直线组成（比如带圆角的矩形、扇形箭头、齿轮轮廓）。必须用路径命令串联：
- 先调用
beginPath()清空旧路径，避免意外连接 - 用
moveTo(x, y)定位起点（例如圆弧前的直线终点） - 调用
arc()添加一段圆弧，此时当前点自动移到圆弧终点 - 接着可用
lineTo()继续画直线，或再调一个arc()接另一段弧 - 需要闭合时，用
closePath()自动连回起点；若用fill()，它会隐式闭合未封闭路径
绘制带缺口的圆或不规则环形
纯圆环（空心圆）不能靠两个同心圆直接 fill —— 那会填满整个内圆区域。正确做法是用一条路径同时包含外圆弧和反向内圆弧：
立即学习“前端免费学习笔记（深入）”；
- 外圆顺时针画一圈：
arc(cx, cy, R, 0, Math.PI * 2, false) - 然后
moveTo()到内圆某点，再逆时针画内圆：arc(cx, cy, r, 0, Math.PI * 2, true) - 这样形成“外顺内逆”的复合路径，
fill()就只渲染环形区域（非零环绕规则）
注意样式与状态管理
圆弧的视觉效果不仅取决于几何，还依赖上下文状态：
- 设置线条宽度：
ctx.lineWidth = 4 - 设置描边颜色：
ctx.strokeStyle = '#333'，填充色：ctx.fillStyle = 'lightblue' - 圆弧两端样式：
ctx.lineCap = 'round'可让弧端更柔和 - 每次绘制新图形前建议重置路径：
ctx.beginPath()，否则可能复用上一次路径造成意外叠加
