爲什麼重疊的畫布線變暗？

我畫了一堆彼此相鄰的線條，每條線條的寬度爲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(); 
    }); 
}

來源

2017-09-06 Andrew Rasmussen

這是因爲該線在其中心拉拔以便0.5像素滲出到其迫使子pixeling發生每一側，因此2半透明線旁邊吸引到彼此。

Snapshot

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);

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

來源

2017-09-06 23:23:57 K3N

哇，感謝快：

爲了通過使用一個平移或偏移量加上與x位置解決簡單地偏移的x位置0.5個象素迴應解決我的問題！這是否意味着如果我製作了線條寬度2，那麼它不會變暗，因爲它不需要亞像素渲染？ –

@AndrewRasmussen在這種情況下應該可以工作，但更多的是關於職位。當一個點不再精確地覆蓋網格單元時，與填充寬度無關，可以使用子像素。您也可以在繪製線條之前使用全局變換（'ctx.translate（0.5，0.5）;'），具體取決於您的場景。也可以使用寬度爲1+的rect（），因爲它們的填充位於邊界內，所以它們的位置取整數值。 – K3N

爲什麼重疊的畫布線變暗？

回答

相關問題