HTML5 Canvas椭圆绘制异常：参数微小差异为何导致结果迥异？

现象说明 #

• 该异常仅出现在Chrome、Opera浏览器，Firefox、Safari无此问题
• 调用draw(106.2367)与draw(106.236)会得到完全不同的渲染结果
• 移除代码中的ctx.closePath()可消除异常

成因解析 #

1. Canvas路径的持久化特性：Canvas 2D上下文的路径是全局持续存在的，closePath()会将当前路径的起点与终点闭合，之后调用ellipse()时，椭圆路径会直接追加到这条已闭合的路径后面，而非创建独立新路径。
2. 浮点精度差异触发的引擎逻辑异常：两个参数的微小浮点差异（106.2367 vs 106.236），会让闭合路径的终点位置产生细微偏移。在Chrome/Opera基于Blink的渲染引擎中，这种偏移会触发不同的路径合并逻辑：当终点与椭圆某端点的距离足够小时，引擎错误地将二者判定为同一点，导致路径连接方式突变；偏移稍大时，路径连接逻辑恢复正常，最终呈现出完全不同的渲染效果。

是否属于浏览器Bug？ #

是，这属于Chrome和Opera的渲染引擎Bug：

• 根据Canvas规范，ellipse()仅负责将椭圆路径追加到当前路径，但Blink引擎在处理已有闭合路径的端点浮点精度时存在逻辑漏洞，导致相同代码因微小数值差异出现完全不一致的渲染结果。
• Firefox的Gecko引擎、Safari的WebKit引擎在路径端点的精度处理上更严谨，因此未出现该异常。

临时解决方案 #

如果需要保留原闭合路径的绘制效果，建议拆分路径绘制流程，通过beginPath()隔离不同路径：

var ctx = document.getElementById("canvas").getContext("2d");

function draw(val) {
  // 绘制第一条闭合路径
  ctx.beginPath();
  ctx.moveTo(160, 110);
  ctx.lineTo(val, 60.1418);
  ctx.closePath();
  ctx.stroke();
  
  // 开启新路径绘制椭圆
  ctx.beginPath();
  ctx.ellipse(110, 110, 50, 50, 0, 4.63705, 0, true);
  ctx.stroke();
}
draw(106.2367);
//draw(106.236);

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