为什么在绘制实线时在画布上看到奇怪的曲线？

Question

我正在制作一些有趣的代码，我注意到一个奇怪的细节。我有画布，这里是在其中绘制线条的代码。 以下是示例：https://jsfiddle.net/vladyslavkushney/mf3p5e2n/

for (let y = 0; y < 400; y++) {
    drawLine(0, 200, 400, y);    
}
/* ... */
var drawLine = (fromX, fromY, toX, toY) => {
    ctx.beginPath();    
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.strokeStyle = "rgb(255,0,0)";
    ctx.stroke();
}

所以简单地从（0,200）到（400，y）中的每一个绘制400行。 结果是三角形。而我所看到的是：

我很好奇为什么我会在右侧看到奇怪的曲线而不是一个纯红色的三角形？

Answer 1

您看到的曲线是锯齿伪影。绘制每条线时，它都是抗锯齿的，但这是相对于它之前的线的模糊边缘完成的。

因此，当每条线的模糊边合并为越来越多的红色时，会产生一个伪影，直到它们在红线和白线之间达到峰值时线条完全水平。近乎水平的线也几乎完全掩盖了他们以前画过的邻居，造成了粉红色的空洞。