如何擺脫HTML5 Canvas筆畫上的羽化邊緣？

Question

當前，使用HTML5 canvas元素時，描邊路徑具有略帶羽化的邊緣。

這裏是我使用的一些示例代碼：

this.context.lineJoin = "round"; 
this.context.lineTo(x1, y1); 
this.context.lineTo(x2, y2); 
this.context.closePath(); 
this.context.stroke(); 

我想知道是否有創造無稍薄邊邊緣的線的方式。

Answer 1

繪製線條時，畫布自動對它們進行反鋸齒，這就是您所描述的羽化邊緣。

要避免反鋸齒，您需要直接使用putImageData手動繪製線條。 （請參閱MDN canvas pixel manipulation）

適合的算法是Bresenham's line algorithm，這對於JS/canvas非常容易實現。

Answer 2

畫布使用子像素精度。

將0.5添加到您的coorxinates中。 0.0是像素之間的邊界，因此線落在兩個圖像數據像素上。