HTML5 Canvas中消除三角形间隙问题求助

问题背景 #

尝试为2D可见性算法适配径向渐变时，无法填充三角形之间的间隙。核心实现代码如下（此前已绘制图像模拟雾效）：

const gradient = context.createRadialGradient(200, 100, 40, 200, 100, 100);
gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
gradient.addColorStop(0.6, "rgba(0, 0, 0, 0.5)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.moveTo(200, 100);
context.lineTo(280, 150);
context.lineTo(170, 240);
context.fillStyle = gradient;
context.fill();
context.beginPath();
context.moveTo(200, 100);
context.lineTo(170, 240);
context.lineTo(90, 120);
context.fill();

曾尝试用stroke方法补间隙，但会在三角形之间留下深色线条。

解决方案 #

1. 合并路径绘制（最优方案） #

分开绘制多个三角形是间隙产生的核心原因——Canvas对独立路径的填充会因抗锯齿或精度问题出现缝隙。将所有可见区域合并为单个路径再填充，能自动处理区域衔接：

修改后的代码：

// 此前绘制雾效的代码保留
const gradient = context.createRadialGradient(200, 100, 40, 200, 100, 100);
gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
gradient.addColorStop(0.6, "rgba(0, 0, 0, 0.5)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
context.globalCompositeOperation = "destination-out";

context.beginPath();
// 连续绘制所有三角形的顶点，形成闭合的可见区域
context.moveTo(200, 100);
context.lineTo(280, 150);
context.lineTo(170, 240);
context.lineTo(90, 120);
context.closePath(); // 自动回到起点，闭合路径

context.fillStyle = gradient;
context.fill();

如果可见区域是多个不连续的三角形，也可以在同一个beginPath()内依次绘制每个三角形（无需重新调用beginPath()），Canvas会将它们视为同一填充组，避免间隙。

2. 修正坐标精度 #

间隙有时源于浮点坐标的精度误差，导致路径边缘未完全贴合。可以对所有顶点坐标取整：

// 示例：对坐标取整
const points = [
  [Math.round(200), Math.round(100)],
  [Math.round(280), Math.round(150)],
  [Math.round(170), Math.round(240)],
  [Math.round(90), Math.round(120)]
];
// 用取整后的坐标绘制路径

3. 优化抗锯齿设置 #

开启Canvas的图像平滑功能，减少因抗锯齿导致的细微缝隙：

context.imageSmoothingEnabled = true;
context.imageSmoothingQuality = "high"; // 可选，提升平滑质量

不推荐：用stroke补间隙 #

stroke方法会增加额外的线条宽度，在destination-out合成模式下，线条的半透明叠加会产生深色痕迹。如果必须处理边缘，可尝试以下设置，但效果不如合并路径可靠：

context.lineWidth = 1;
context.lineCap = "round";
context.lineJoin = "round";
context.strokeStyle = gradient;
context.stroke();

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