arc()绘制圆弧需填对六个参数：x、y为圆心坐标（相对canvas左上角），radius≥0，startAngle和endAngle单位为弧度（非度数），anticlockwise布尔值控制方向；且必须配合beginPath()、设置strokeStyle/fillStyle、调用stroke()/fill()才能显示。
Canvas 画圆或圆弧，核心靠 arc() 方法，但它不是“点一下就出圆”的快捷键——参数填错、单位搞混、步骤漏掉，都会让图形消失不见。关键不在函数本身多难，而在理解它怎么工作、哪些环节必须手动补全。
arc() 的五个必填参数怎么填
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 共六个位置，前五个是强制参数，最后一个可省略（默认顺时针）。最容易踩坑的是后两个角度：
-
x 和 y 是圆心坐标，以 canvas 左上角为原点，不是相对路径起点；写成
arc(100, 100, ...)就表示圆心在距左、上各 100 像素处 -
radius 必须 ≥ 0；传负数、
NaN或undefined不报错，但不渲染任何内容 -
startAngle 和 endAngle 单位是弧度，不是度数；写
90是错的，那是 90 弧度（≈5157°），正确写法是Math.PI / 2（90°）、Math.PI（180°）、2 * Math.PI（360°） -
anticlockwise 是布尔值，
true表示逆时针绘制，false（默认）为顺时针；它不改变角度数值含义，只翻转方向
角度和弧度怎么换算
Canvas 所有涉及角度的地方（arc、rotate、三角函数等）都用弧度。记住这个公式就够了：
弧度 = 角度 × Math.PI / 180
常用对照：
- 0° →
0 - 90° →
Math.PI / 2（约 1.57） - 180° →
Math.PI（约 3.14） - 270° →
3 * Math.PI / 2（约 4.71） - 360° →
2 * Math.PI（约 6.28）
写代码时别硬记数字，直接用表达式更安全：arc(100, 100, 50, 0, 120 * Math.PI / 180, false) 就是画 120° 的圆弧。
为什么调了 arc() 却没显示图形
arc() 只负责把一段弧线“加进当前路径”，它本身不画也不填色。要让它真正出现，下面四步缺一不可：
-
调用
beginPath()：清空上一次路径，避免旧路径干扰新图形连接方式 -
设置样式：描边需
ctx.strokeStyle = '#333'+ctx.lineWidth = 2；填充需ctx.fillStyle = 'red' -
触发绘制：描边用
ctx.stroke()，填充用ctx.fill()；只写arc()没用 -
确认坐标和半径在画布内：比如 canvas 宽高是 400×300，却写
arc(500, 500, 20, ...)，圆心超出范围，自然看不到
画整圆和画圆弧的实际区别
画整圆只是画圆弧的一种特例：起始角为 0，结束角为 2 * Math.PI。但要注意：
- 即使参数写对，也得保证路径已开始、样式已设、绘制已触发，否则还是空白
- 画进度条、仪表盘这类动态弧长场景，改
endAngle最直接；而纯静态圆形图标，CSSborder-radius: 50%更轻量 - 需要像素级控制、逐帧动画或混合其他 canvas 图形时，
arc()是唯一选择，但记得配合clearRect()清屏防重叠
