canvas学习-----1px线条模糊问题

canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图:

这样的线条显然不是我们想要的。

这篇文章的目的就是弄清楚里面的原理,以及解决它。

大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下。

其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看清楚每个像素,会是什么情况呢?大概是这个样子:

每个像素都有起止范围,如图所示,他们的范围从左起,跨过1像素,到右止。
如果我们画1像素线条的时候,遵循像素的起止范围,那么我们肯定能得到一个很标准的细线。如下:

但遗憾的是canvas的线条画法不一样,上一篇文章我们已经说了,canvas的每条线都有一条无限细的“中线”,线条的宽度是从中线向两侧延伸的。如果我们还是从第2个像素点画一条线,那么线条的中线就会靠齐到第2个像素的起点,然后我们开始画了,问题也就来了:Canvas 的线条以中线向两侧延伸,而不是向某一边延伸(比如这里,如果只是往右侧延伸,那么我们的问题就不再是问题了),延伸过后我们的线条实际上是这样的:

 

此时又有个问题:计算机不允许出现小于1px的图形,所以他做了一个折中的事:把这两个像素都绘制了

所以,如此一来,本来1px的线条,就成了看起来2px宽的线条。

失败的原因找到了:Canvas中的line把中线与像素的起点对齐了,而不是像素的中间点。

那么我们怎么解决这个蛋疼的问题?也许有人已经想到了:既然是因为两个的起点不一样,那我们就把他们的起点变得一样吧!

我们让线条的中线和像素的中间点对齐就行了!

像素的中间点很好找,比如第2像素的中间点,依据图上的解释就是1.5像素的位置,那么x像素的中间点就是(x-0.5)px。

 

当然,在不很严谨的场合,你使用x+0.5也是可以的。

 现在我们在canvas上试试我们的研究结果和对比。

  

看起来对了吧?

不过貌似这样一来我们画线的时候就非常纠结,难道每次都去加这个让人郁闷的0.5?当然不是,因为我们大部分时间都是用变量保存值的,就不用给每个值加0.5 了

而且,对于lineWidth>1 的线,我们也不用管它:因为只有线条宽1px的时候,这个问题才最明显。

 

    var cvs = document.getElementById("cvs");
    cvs.width = 300;
    cvs.height = 500;


    var ctx = cvs.getContext('2d');
    ctx.moveTo(30,10);
    ctx.lineTo(200,10);
    ctx.lineTo(200,100);
    ctx.lineTo(30,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'red';
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(30.5,200.5);
    ctx.lineTo(200.5,200.5);
    ctx.lineTo(200.5,300.5);
    ctx.lineTo(30.5,300.5);
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'red';
    ctx.closePath();
    ctx.stroke();

 

 

转载:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98/

 

作者: lolDragon

出处: http://www.cnblogs.com/lolDragon/

文章版权归本人所有,欢迎转载。文章中不正之处,请不吝赐教,欢迎讨论,共同进步。

posted on 2017-04-15 11:39  lolDragon  阅读(1501)  评论(0编辑  收藏  举报

导航