为什么重叠的画布线会变暗？

Question

我正在绘制一堆彼此相邻的线条，每条线条的宽度为1.整个画布都有一个缩小的比例，以便它们可能在彼此之上呈现。

如果它们都是纯绿色（＃00ff00），为什么重叠会变暗？附上截图和代码示例。

render(props) {
  const {
    context,
    x, y,
  } = props;

  context.lineWidth = 1;
  context.fillStyle = '#000';
  this._pings.forEach((ping, i) => {
    context.beginPath();
    context.moveTo(x + i, y);
    context.lineTo(x + i, Math.max(y - ping, y - 100));
    context.strokeStyle = pingToColor(ping);
    context.stroke();
  });
}

Answer 1

这是因为线条在其中心绘制，因此每边都有0.5像素出血，这会迫使子像素发生，因此两条半透明线相互拉近。

通过使用平移或将偏移量添加到x位置来简单地将x位置偏移0.5像素：

＆＃13;

＆＃13;

var ctx = c.getContext("2d");
ctx.strokeStyle = "#00ff00";

// Draw some random overlapping lines
for(var i = 0, x ,y; i < 500; i++) {
  x = (Math.random() * 150)|0;
  y = Math.random() * 100 + 50;
  
  ctx.moveTo(x, y>>1);          // non-offset
  ctx.lineTo(x, y);
  
  ctx.moveTo(x+150+0.5, y>>1);  // offset 0.5 (ignore 150)
  ctx.lineTo(x+150+0.5, y);
}
ctx.stroke();

ctx.fillStyle = "#fff";
ctx.fillRect(150,0,1,150);
ctx.fillText("Integer position", 5, 10);
ctx.fillText("Offset +0.5", 155, 10);

＆＃13;

<canvas id=c style="background:#000"></canvas>

＆＃13;

＆＃13;

＆＃13;