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 = 顺时针”，像“佛顺”连读

为什么顺时针画圆反而更常用

多数场景（比如饼图切片、仪表盘指针、圆形按钮轮廓）默认用顺时针绘制，因为逻辑直观：

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

• 从 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，圆的一部分甚至全部不可见