javascript - EaselJS 线条模糊

Question

我正在使用 EaselJS 作为 HTML5 Canvas 的 API。

我注意到下面的代码:

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

...产生以下行:

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

我的应用程序需要清晰的图像，请指教。

Answer 1

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

最佳实践方法是将所有内容都放入容器中，并将容器置于正或负 (0.5,0.5) - 这将调整所有内容，您可以在正常坐标空间中工作，而不是抵消所有计算.