Firefox中JS Canvas Arc函数的线条端点Bug问题

你遇到的Firefox与Chrome渲染差异，核心原因是两款浏览器对Canvas开放路径的描边端点（lineCap）处理逻辑不一致，结合你的代码参数（半圆半径等于描边半宽），放大了这种差异：

• 你的代码绘制的是开放的半圆路径（未调用closePath()），描边宽度40的半宽刚好等于半圆半径20。
• Chrome对butt类型端点的处理，会将描边截断位置与路径起点/终点的径向方向对齐，使得描边外边缘恰好形成完整的闭合半圆轮廓，配合内部填充后呈现出你预期的实心带黑边效果。
• Firefox则严格遵循Canvas规范中butt端点的定义：端点沿路径切线的垂直方向精确截断。对于半圆的起点（(20,0)）和终点（(-20,0)），切线方向是垂直于径向的（向下/向上），因此描边会在两端的上下方向超出径向范围，形成额外的黑色端点，最终呈现出不符合预期的渲染结果。

如果要实现跨浏览器一致的效果，建议将路径闭合（调用ctx.closePath()），或者调整描边宽度与半径的比例，避免依赖浏览器的特殊处理逻辑。

内容的提问来源于stack exchange，提问作者Wolfgang Müller