如何摆脱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是像素之间的边界，因此线落在两个图像数据像素上。