arc()画圆需满足三条件：调beginPath()、设样式、执行stroke()/fill()；参数中x/y为圆心坐标，radius≥0，startAngle/endAngle单位为弧度（如360°须写2*Math.PI），anticlockwise默认false（顺时针）。
Canvas 画圆靠 arc()，但它不是“一键画圆”函数——它画的是圆弧，画整圆得手动凑够一圈（0 到 2π），而且必须搭配路径开始、样式设置和描边/填充三步，缺一不可。
arc() 的五个核心参数怎么填
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 共六个位置，前五个必填。关键细节：
- x 和 y 是圆心坐标，以 canvas 左上角为原点，不是相对当前绘图位置
- radius 必须 ≥ 0；传负数或 NaN 不报错，但什么也不显示
-
startAngle 和 endAngle 单位是弧度，不是度数：0 对应 3 点钟方向（正 x 轴），逆时针递增；90° 要写
Math.PI / 2，180° 是Math.PI，360° 是2 * Math.PI -
anticlockwise 是布尔值，默认
false（顺时针）；设为true才逆时针——记住口诀：“false = 顺时针”，像“佛顺”连读
为什么顺时针画圆反而更常用
多数场景（比如饼图切片、仪表盘指针、圆形按钮轮廓）默认用顺时针绘制，因为逻辑直观：
- 从 0 弧度（3 点钟）开始，顺时针走到
Math.PI就是下半圆，走到2 * Math.PI就是完整一圈 - 即使
startAngle > endAngle（比如 3π/2 到 π/2），设false也会自动顺时针跨过 0 弧度，画出最短路径的弧（不绕远路） - 逆时针常用于特殊动画衔接或特定数学表达，日常开发中较少主动切换
画整圆必须满足的三个条件
只调 arc() 不会显示任何图形——它只是往路径里加一段弧。要看到圆，得同时做到：
- 先调
beginPath()清空旧路径、开启新路径 - 设置样式：如
strokeStyle（描边色）或fillStyle（填充色） - 最后执行
stroke()或fill()才真正渲染
例如画一个居中、半径 50 的描边圆：
ctx.beginPath(); ctx.arc(300, 200, 50, 0, 2 * Math.PI, false); ctx.stroke();
常见踩坑与快速自查
- 角度写成
90或180？那是 90 弧度（≈5157°），几乎绕十几圈——务必换算：angle * Math.PI / 180 - 没调
beginPath()？可能复用上一次路径，导致图形错位或叠加 - 漏了
stroke()或fill()？arc() 只建路径，不渲染，所以“什么都没画出来”其实是“什么都没画出来” - 圆心坐标超出 canvas 范围？比如
y = -10，圆的一部分甚至全部不可见
