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

Question

我只是为了好玩而编写一些代码，我注意到一个奇怪的细节。我有 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) 中的每一个绘制 400 条线。 结果是三 Angular 形。我看到的是这样的:

我很好奇为什么我在右侧看到奇怪的曲线而不是实心的红色三 Angular 形？

Answer 1

您看到的曲线是混叠伪像。绘制每条线时，都会对其进行抗锯齿处理，但这是相对于其之前线的模糊边缘来完成的。

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