Windows Chrome下Canvas线条渲染存在间隙问题排查

我通过pointerMove事件获取点列表，使用Canvas绘制连续线条，但在Windows 11的Chrome 121.0.6167.140中渲染的线条存在细微间隙，Firefox中无此现象。相关代码如下：

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid grey"></canvas>

const pointList = JSON.parse(
  '[{"x":648.666748046875,"y":393.66668701171875},{"x":651.3333740234375,"y":394.3333435058594},{"x":652,"y":395},{"x":652.666748046875,"y":395},{"x":654.666748046875,"y":395},{"x":656,"y":395},{"x":659.3333740234375,"y":391.66668701171875},{"x":663.3333740234375,"y":388.3333435058594},{"x":664.666748046875,"y":387},{"x":665.3333740234375,"y":384.3333435058594},{"x":668,"y":381},{"x":668.666748046875,"y":379.66668701171875},{"x":670.666748046875,"y":376.3333435058594},{"x":672,"y":374.3333435058594},{"x":672.666748046875,"y":373},{"x":673.3333740234375,"y":371},{"x":674.6666870117188,"y":369.66668701171875},{"x":675.3333740234375,"y":367},{"x":676,"y":365.66668701171875},{"x":676.6666870117188,"y":363},{"x":678.6666870117188,"y":359.66668701171875},{"x":678.6666870117188,"y":357.66668701171875},{"x":678.6666870117188,"y":354.3333435058594},{"x":678.6666870117188,"y":351.66668701171875},{"x":678.6666870117188,"y":348.3333435058594},{"x":678.6666870117188,"y":346.3333435058594},{"x":678.6666870117188,"y":343},{"x":678.6666870117188,"y":341},{"x":678,"y":339},{"x":678,"y":335},{"x":677.3333740234375,"y":331.66668701171875},{"x":676.6666870117188,"y":327.66668701171875},{"x":674.6666870117188,"y":324.3333435058594},{"x":674,"y":319.66668701171875}]'
);

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 6;
ctx.strokeStyle = "black";

ctx.setTransform(new DOMMatrix().translate(-600, -300));

ctx.beginPath();
pointList.forEach((p, i) => {
  if (i === 0) {
    ctx.moveTo(p.x, p.y);
    return;
  }
  ctx.lineTo(p.x, p.y);
});
ctx.stroke();

问题分析 #

这种差异属于Chrome Canvas渲染引擎的兼容性表现，核心原因有两点：

1. 非整数坐标的子像素渲染：点列表包含大量带小数的坐标，Chrome在处理这类子像素位置的短线段时，抗锯齿逻辑可能导致相邻线段边缘未完全重叠，露出间隙。
2. 线段连接的默认行为差异：Firefox默认会自动填补线段连接处的微小间隙；而Chrome默认的lineJoin="miter"和lineCap="butt"组合，在连续绘制短线段时容易出现视觉间隙。

解决方案 #

以下几种方法可解决该问题：

1. 修改线段连接与端点样式 #

给Canvas上下文添加配置，让线段连接处圆润过渡，直接填补间隙：

ctx.lineJoin = "round"; // 线段连接处使用圆角
ctx.lineCap = "round";  // 线段端点使用圆角

2. 坐标取整处理 #

将所有点的x、y坐标转为整数，避免子像素渲染带来的精度问题：

pointList.forEach(p => {
  p.x = Math.round(p.x);
  p.y = Math.round(p.y);
});

3. 路径简化 #

合并距离极近的连续点，减少不必要的短线段，降低渲染间隙概率：

// 简化路径，过滤距离小于1的相邻点
const simplifiedPoints = [pointList[0]];
for (let i = 1; i < pointList.length; i++) {
  const last = simplifiedPoints[simplifiedPoints.length - 1];
  const dx = pointList[i].x - last.x;
  const dy = pointList[i].y - last.y;
  if (Math.sqrt(dx*dx + dy*dy) > 1) {
    simplifiedPoints.push(pointList[i]);
  }
}
// 使用简化后的点绘制
ctx.beginPath();
simplifiedPoints.forEach((p, i) => {
  if (i === 0) {
    ctx.moveTo(p.x, p.y);
    return;
  }
  ctx.lineTo(p.x, p.y);
});
ctx.stroke();

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