画布上三角形的意外边框

Question

我在开发一个3D引擎时发现，所绘制的每个形状周围都会有一个无意间产生的边框效果。为了解决这个问题，我已经试过一些办法，比如在canvas元素的CSS样式中设置 image-rendering: pixelated;，以及在JavaScript中禁用抗锯齿功能——ctx.imageSmoothingEnabled = false;。另外，我还尝试通过自行添加轮廓线条去遮盖这个现象，但这导致了明显的卡顿现象。是否有其他方式可以有效地解决这个问题呢？

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

    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.lineTo(300, 200);
    ctx.lineTo(300, 300);
    ctx.lineTo(200, 200);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.lineTo(200, 300);
    ctx.lineTo(300, 300);
    ctx.lineTo(200, 200);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.closePath();
    // 这两个三角形共享了两个相同的点，但在它们之间仍然可能存在一条轮廓线或空隙

* {
        margin: 0 auto;
    }

    canvas {
        background: black;
    }

gsm2009 · Answer

那条线是通过beginPath和closePath绘制的，省略这两个方法，线条就不会出现了，一切就正常了。

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

ctx.fillStyle = "white";
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 300);
ctx.lineTo(200, 200);
ctx.fill();

ctx.moveTo(200, 200);
ctx.lineTo(200, 300);
ctx.lineTo(300, 300);
ctx.lineTo(200, 200);
ctx.fill();

* {
  margin: 0 auto;
}

canvas {
  background: black;
}