HTML Canvas arc方法传入3.1415*2参数时圆形绘制失败问题

问题现象 #

调用Canvas 2D上下文的arc()方法绘图时存在以下异常表现：

• 第5个参数（结束角度）传入Math.PI * 2时，可以正常绘制预期的红色圆形
• 相同位置替换为3.1415 * 2时，无法绘制出红色圆形
  两种传参预期得到一致的完整圆形绘制结果，可稳定复现问题的完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple Solar System</title>
  </head>

  <body>xxx
    <canvas
      id="solar-canvas"
      width="380"
      height="300"
      style="border: 1px solid #aaaaaa"
    ></canvas>
  </body>
</html>

const canvas = document.getElementById("solar-canvas");
const context = canvas.getContext("2d", { alpha: false });

context.beginPath();
context.fillStyle = "red";

// 正常绘制的写法
//const val = Math.PI * 2;
// 无法正常绘制的写法
const val = 3.1415 * 2;
context.arc(190,150, 9, 0, val, true);

context.fill();
context.closePath();

问题原因 #

1. 精度差异：JS中Math.PI是双精度浮点数表示的高精度π值，约等于3.141592653589793，手动书写的3.1415是截断后的近似值，计算得到的3.1415 * 2 = 6.283，比真实2π（约6.283185307179586）小了约0.000185弧度。
2. 绘制方向逻辑：arc()方法的第6个参数传入true代表逆时针绘制。Canvas的角度规则为0弧度指向x轴正方向（3点钟方向），逆时针绘制时角度向减小的方向变化。传入的结束角度会先对2π取模，此时6.283取模后等价于约-0.000185弧度，也就是0弧度位置偏上一点点的位置。从0弧度逆时针绘制到这个终点，只需要走极短的0.000185弧度就到达终点，根本不会绕圆心画满一整圈，填充后自然看不到完整圆形。
3. 特殊规则适配：当传入的结束角度和起始角度的差值在浮点数精度下刚好等于2π整数倍时（比如Math.PI*2的场景），Canvas会按规范特殊处理为完整圆形，不会出现路径缺口。

修复方案 #

• 优先直接使用Math.PI * 2作为整圆的结束角度参数，不要手动书写π的近似值，从根源避免精度误差
• 若需要手动传入近似角度值，确认绘制方向参数和角度差值匹配：比如当前逆时针场景下，需要传入略大于2π的近似值才能画满整圆，但该方案不推荐，不同环境下浮点数计算可能存在差异
• 注意fill()方法调用时会自动闭合当前路径，示例中fill()之后再调用closePath()没有实际作用，可以移除。

内容的提问来源于stack exchange，提问作者Peter Kellner