javascript - EaselJS 线条模糊

Question

我使用 EaselJS 作为 HTML5 画布的 API。

我注意到以下代码：

line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);

...产生以下行：

我将粗细设置为 1 - 但线条仍然模糊。如果你放大快照，你可以看到它实际上占据了 3 个像素。我相信我在某处读到画布在两个像素之间绘制了一个点，因此两个像素实际上都会被着色。您需要将绘制点的位置移动像素宽度的一半，使其落在整个像素上。

我的应用程序需要清晰的图像，请告知。

Answer 1

EaselJS 只是画布 API 的抽象——它在指定坐标上绘制所有线条。snapToPixel API 专门用于进行自动舍入，但未考虑您所描述的半像素问题。

最佳实践方法是将所有内容放入容器中，并将容器设置为正数或负数（0.5,0.5） - 这将调整所有内容，您可以在正常的坐标空间中工作，而不是抵消所有计算。