如何摆脱HTML5 Canvas笔划上的羽毛边缘？

Question

目前，在使用HTML5画布元素时，描边路径的边缘略有羽毛。

以下是我正在使用的一些示例代码：

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

我想知道是否有办法创建没有略微羽毛边缘的线条。

Answer 1

绘制线条时，画布会自动对它们进行抗锯齿处理，这就是您所描述的羽化边缘。

要避免抗锯齿，您需要直接使用putImageData手动绘制线条。 （参见MDN for canvas pixel manipulation）

一个合适的算法是Bresenham's line algorithm，这很容易为JS / canvas实现。

Answer 2

Canvas使用亚像素精度。

在你的coorxinates中加0.5。 0.0是像素之间的边界，因此线落在两个图像数据像素上。