Canvas绘制双三角形组成的矩形时对角线出现白线问题

这种对角线出现细白线的情况在Canvas渲染里挺常见的，我之前也踩过这个坑！原因其实是Canvas默认的抗锯齿机制在搞鬼：虽然你用的都是整数坐标，但两个三角形的边缘在渲染时，抗锯齿会生成半透明的过渡像素，这些像素叠加后反而形成了视觉上的“白线”缝隙。

给你几个实用的解决方案：

• 轻微重叠三角形边缘：把其中一个三角形的顶点微调0.5像素左右（比如把某个Point3D的x或y坐标加/减0.5），让两个三角形的边缘稍微重叠，就能覆盖抗锯齿产生的缝隙区域，亲测有效。
• 关闭抗锯齿：通过Canvas上下文设置禁用抗锯齿：

  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;
  

  不过这个方法会让所有图形的边缘变得锐利粗糙，适合对精度要求极高但不在意边缘平滑度的场景。
• 直接绘制矩形（如果适用）：如果你的需求只是绘制矩形，完全可以直接用Canvas的fillRect()方法，既不会有缝隙问题，代码也更简洁：

  ctx.fillRect(100, 100, 100, 100);
  

  当然，如果是因为后续要做3D变换等必须用三角形拼接的场景，就忽略这个建议~

你的初始化代码：

s.initQuadrangle(new Point3D([100, 100, 0]), new Point3D([200, 100, 0]), new Point3D([200, 200, 0]), new Point3D([100, 200, 0]));

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