javascript - 为什么在绘制实线时在 Canvas 上看到奇怪的曲线？

我在编写一些代码只是为了好玩，我注意到一个奇怪的细节。我有画布，这是在其中绘制线条的代码。
这是示例：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）的每条线。
结果是三角形。我所看到的看起来是这样的：



我很好奇为什么我在右侧看到奇怪的曲线但没有看到实心的红色三角形？

最佳答案

您看到的曲线是混叠工件。绘制每条线时，将对其进行抗锯齿处理，但这是相对于其之前的线的模糊边缘进行的。

因此，当每条线的模糊边缘合并为越来越多的红色时会产生伪影，直到当线完全水平时它们在红色和白色之间的中间位置达到峰值。近水平线也几乎完全掩盖了先前绘制的邻居，从而形成了粉红色的空隙。

关于javascript - 为什么在绘制实线时在 Canvas 上看到奇怪的曲线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41602131/