为什么用代码编程画出的线条有时候会模糊?

        我发现无论是PHP的GD库还是HTML5的 canvas ,当线宽是基数时,线的边沿都会模糊,一直不明白怎么回事,今天看了MDN的教程才明白原来是因为坐标和像素点不是一一对应的,而是对于像素点的边沿。看下面的教程就回明白了,以下转自MDN


        想要获得精确的线条,必须对线条是如何描绘出来的有所理解。见下图,用网格来代表 canvas 的坐标格,每一格对应屏幕上一个像素点。在第一个图中,填充了 (2,1) 至 (5,5) 的矩形,整个区域的边界刚好落在像素边缘上,这样就可以得到的矩形有着清晰的边缘。

canvas-grid

        如果你想要绘制一条从 (3,1) 到 (3,5),宽度是 1.0 的线条,你会得到像第二幅图一样的结果。实际填充区域(深蓝色部分)仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染,这意味着那些像素只是部分着色,结果就是以实际笔触颜色一半色调的颜色来填充整个区域(浅蓝和深蓝的部分)。这就是上例中为何宽度为 1.0 的线并不准确的原因。要解决这个问题,你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素,那么像第三幅图那样绘制从 (3.5,1) 到 (3.5,5) 的线条,其边缘正好落在像素边界,填充出来就是准确的宽为 1.0 的线条。

posted on 2011-12-30 09:31  东方泛起鱼肚白  阅读(284)  评论(0编辑  收藏  举报

导航