用arc()绘制圆弧和圆形的关键是参数准确、路径完整、逻辑清晰；需调用beginPath()开启路径，arc()设置圆心、半径、起始与结束弧度（0到2*Math.PI为整圆），再用fill()或stroke()渲染。
用 arc() 绘制圆弧和圆形，关键不在“完美”，而在参数准确、路径完整、绘图逻辑清晰。只要角度、方向、半径和坐标设置得当，结果自然精准稳定。
画一个标准圆形
圆形是起始角为 0、结束角为 2 * Math.PI 的完整闭合弧线。必须配合 beginPath() 和 fill() 或 stroke() 才能真正显示出来。
- 调用
ctx.beginPath()开启新路径，避免与之前图形混叠 -
ctx.arc(x, y, r, 0, Math.PI * 2, false)—— 圆心 (x,y)，半径 r，顺时针绕满一圈 - 用
ctx.fill()填充实心圆，或ctx.stroke()描边空心圆 - 注意：
false是默认值，可省略；但显式写出更易读、不易出错
画一段可控的圆弧
圆弧的核心是起始角和结束角的弧度值。0 弧度对应 3 点钟方向（正 x 轴），角度按顺时针递增（anticlockwise = false）。
- 1/4 圆弧（90°）：从 0 到
Math.PI / 2 - 半圆（180°）：从 0 到
Math.PI，或从Math.PI到Math.PI * 2 - 任意比例弧长：用
ratio * Math.PI * 2计算对应弧度，比如 30% 就是0.3 * Math.PI * 2 - 若需逆时针绘制（如某些环形进度条内弧），把最后一个参数设为
true
常见坑点与应对建议
很多“画不圆”“断开”“方向反了”的问题，其实都源于几个细节疏忽。
立即学习“前端免费学习笔记（深入）”；
- 忘记调用
beginPath()→ 导致多条弧线连成意外路径，用完即清 - 只调
arc()没接stroke()或fill()→ 什么也看不到，弧线只是路径定义，不是图形本身 - 角度单位误用角度值而非弧度 → 必须转：例如 45° 写成
45 * Math.PI / 180，或直接记常用值（Math.PI/4） - canvas 坐标原点在左上角 → 圆心坐标要根据 canvas 宽高合理设置，比如居中圆：x = canvas.width/2, y = canvas.height/2
加点实用小技巧
让圆弧不只是“画出来”，还能更稳、更灵活、更易维护。
- 清屏别靠手动刷新：动画中用
ctx.clearRect(0, 0, canvas.width, canvas.height)保证干净画布 - 样式隔离：用
ctx.save()和ctx.restore()包裹不同图形的样式（如颜色、线宽），互不干扰 - 防浮点误差：累计角度时，对最终
endAngle做Math.min(endAngle, Math.PI * 2)截断，避免超一圈导致异常 - 调试辅助：临时开启
ctx.strokeStyle = 'red'; ctx.lineWidth = 1; ctx.stroke()查看路径走向
