HTML canvas绘制圆形详解

HTML canvas 中的 `arc()` 函数常被误认为是“画圆专用命令”，实则它只是向路径添加一段圆弧的构造器，不负责渲染——必须配合 `beginPath()` 初始化路径、设置 `strokeStyle` 或 `fillStyle`、再调用 `stroke()` 或 `fill()` 才能真正显示图形；尤其要注意角度单位为弧度（非度数）、圆心坐标基于画布左上角、半径不能为负，而整圆需手动指定 `startAngle = 0` 和 `endAngle = 2 * Math.PI`；许多“画不出来”的困惑，根源不在公式记错，而在于忽略了 canvas 路径状态管理的严谨性——从起点重置到样式生效，每一步都缺一不可。

arc() 不是“画圆专用函数”，它画的是圆弧；要画整圆，必须手动把起始角设为 0、结束角设为 2 * Math.PI，且确保路径已开始（beginPath()）、样式已设置、最后调用 stroke() 或 fill() —— 少一步都看不到圆。

arc() 的 5 个参数到底怎么填

arc(x, y, radius, startAngle, endAngle, anticlockwise) 这 6 个位置里，前 5 个是必填的。其中最容易错的是后两个角度参数：它们单位是**弧度**，不是度数；从正 x 轴（3 点钟方向）开始，逆时针为正方向。

• x 和 y 是圆心坐标，相对于 canvas 左上角，不是相对于当前路径起点
• radius 必须 ≥ 0；传负数或 NaN 会静默失败（不报错，但没图形）
• startAngle 和 endAngle 写成 90 或 180 是常见错误——这其实是 90 弧度（≈5157°），几乎绕圆十几圈；正确写法是 Math.PI / 2（90°）、Math.PI（180°）
• anticlockwise 默认 false，即顺时针画弧；设为 true 才逆时针。注意：它不改变角度数值含义，只改变绘制方向；即使 startAngle > endAngle，设 false 仍会顺时针跨越 0 弧度绕过去

为什么画了 arc() 却什么都没显示

这是新手最常卡住的地方：arc() 只向当前路径添加一段弧形子路径，它本身不渲染任何东西。你得自己负责路径管理与绘制触发。

• 漏掉 ctx.beginPath()：上一次路径残留会影响本次弧线连接方式，甚至导致意外闭合或描边错位
• 没调用 ctx.stroke() 或 ctx.fill()：arc() 后路径只是“存在”，没有视觉输出
• 忘记设置 ctx.strokeStyle 或 ctx.fillStyle：颜色默认是黑色，但如果 canvas 背景也是深色，可能看不清；更常见的是压根没设，结果描边宽度为 1、颜色为透明黑（#00000000）
• 半径太小或坐标超出 canvas 范围：比如 canvas.width = 200，却写 arc(300, 300, 10, ...)，圆心在画布外，弧线自然不可见

arc() 画整圆 vs 其他画圆方式的取舍

虽然 arc(x,y,r,0,2*Math.PI) 能画圆，但它本质仍是路径操作；实际项目中要不要这么干，得看场景。

• 需要动态控制圆弧长度（如进度条、仪表盘）→ 必用 arc()，改 endAngle 即可
• 只要一个静态实心圆，且后续可能缩放或高 DPI 适配 → 更推荐 SVG ，矢量、无锯齿、CSS 可控
• 只是做圆形容器（头像、图标背景）→ 直接用 CSS border-radius: 50%，性能好、语义清、响应式友好
• 需要像素级控制、动画逐帧更新、或与其他 canvas 图形混合（如粒子、滤镜）→ arc() 是唯一选择，但记得用 clearRect() 清屏再重绘

真正难的不是记住 2 * Math.PI，而是理解 arc() 是路径构造器，不是绘图命令；它的行为高度依赖上下文状态（是否 beginPath、当前笔点在哪、有没有 fillStyle）。很多“画不出来”的问题，其实出在路径起点没重置，或者 stroke 颜色被之前某次操作悄悄覆盖了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~