arc()方法需严格配置六参数、弧度单位、路径状态及渲染指令才能绘图：x/y为圆心坐标，radius≥0，start/endangle以弧度计（0°=0，90°=π/2），anticlockwise默认false；调用后须beginpath()、设样式、stroke()/fill()且确保坐标在画布内。
HTML5 Canvas 中的 arc() 方法是绘制圆弧和圆形的核心工具，但它不是“调了就出图”的傻瓜函数——必须配齐参数、单位、路径状态和渲染指令，缺一不可。
arc() 的六个参数怎么填
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 共六个位置，前五个必填，最后一个可省略（默认 false，即顺时针）：
-
x、y：圆心坐标，以 canvas 左上角为原点。例如
arc(100, 80, ...)表示圆心在距左边缘 100px、上边缘 80px 处 -
radius：半径，必须 ≥ 0；传负数、
NaN或未定义不会报错，但不显示任何内容 - startAngle、endAngle：起始角与终止角，单位是弧度，不是度数。0 弧度对应 3 点钟方向（正 x 轴），逆时针递增
-
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, 90, false) —— 这画的是 0 到 90 弧度（≈5157°），几乎绕满几十圈；
正确写法：arc(100, 100, 50, 0, 90 * Math.PI / 180, false) 或更清晰地写成 arc(100, 100, 50, 0, Math.PI / 2, false)。
为什么调了 arc() 却什么也没出现
arc() 只负责把一段弧线“添加进当前路径”，它本身不绘制也不着色。要让图形真正可见，以下四步一个都不能少：
- 调用
ctx.beginPath()：清空上一次路径，避免新旧路径意外连接或干扰 - 设置样式：描边需
ctx.strokeStyle = '#333'+ctx.lineWidth = 2；填充需ctx.fillStyle = 'red' - 触发渲染：描边用
ctx.stroke()，填充用ctx.fill() - 确认坐标和半径在画布可视范围内：比如 canvas 是 400×300，却写
arc(500, 500, 20, ...)，圆心超出边界，自然不可见
画整圆 vs 画圆弧：关键就看两个角度
画整圆只是画圆弧的一种特例：
- 整圆（描边）：
ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); - 整圆（填充）：
ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); - 四分之一圆弧（从 3 点钟到 6 点钟，顺时针）：
ctx.beginPath(); ctx.arc(100, 75, 50, 0, Math.PI / 2); ctx.stroke(); - 扇形（带填充的圆弧区域）：需要补两条半径线（
lineTo）+closePath()，再调用fill()
注意：即使画整圆，startAngle 和 endAngle 写成 0 和 2 * Math.PI 就够了，方向参数 anticlockwise 对结果无实质影响（绕满一圈后一样闭合）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
