上次我們講到，canvas有時(shí)候會(huì)出現(xiàn)1像素的線(xiàn)條模糊不清且好像更寬的情況,這樣的線(xiàn)條顯然不是我們想要的。這篇文章的目的就是弄清楚里面的原理，以及解決它,感興趣的朋友可以了解下

這樣的線(xiàn)條顯然不是我們想要的。

這篇文章的目的就是弄清楚里面的原理，以及解決它。

大家都知道屏幕上最小的顯示尺寸就是1像素，雖然小于1像素的東西可能顯示不出來(lái)，但計(jì)算機(jī)可不管，他會(huì)試著畫(huà)一下。

其實(shí)像素終究來(lái)說(shuō)也是一個(gè)單位，假如我們把畫(huà)布放大到足夠大，足以看清楚每個(gè)像素，會(huì)是什么情況呢？大概是這個(gè)樣子：

每個(gè)像素都有起止范圍，如圖所示，他們的范圍從左起，跨過(guò)1像素，到右止。

如果我們畫(huà)1像素線(xiàn)條的時(shí)候，遵循像素的起止范圍，那么我們肯定能得到一個(gè)很標(biāo)準(zhǔn)的細(xì)線(xiàn)。如下：

但遺憾的是canvas的線(xiàn)條畫(huà)法不一樣，上一篇文章我們已經(jīng)說(shuō)了，canvas的每條線(xiàn)都有一條無(wú)限細(xì)的“中線(xiàn)”，線(xiàn)條的寬度是從中線(xiàn)向兩側(cè)延伸的。如果我們還是從第2個(gè)像素點(diǎn)畫(huà)一條線(xiàn)，那么線(xiàn)條的中線(xiàn)就會(huì)靠齊到第2個(gè)像素的起點(diǎn)，然后我們開(kāi)始畫(huà)了，問(wèn)題也就來(lái)了：Canvas 的線(xiàn)條以中線(xiàn)向兩側(cè)延伸，而不是向某一邊延伸(比如這里，如果只是往右側(cè)延伸，那么我們的問(wèn)題就不再是問(wèn)題了)，延伸過(guò)后我們的線(xiàn)條實(shí)際上是這樣的：

此時(shí)又有個(gè)問(wèn)題：計(jì)算機(jī)不允許出現(xiàn)小于1px的圖形，所以他做了一個(gè)折中的事：把這兩個(gè)像素都繪制了。

所以，如此一來(lái)，本來(lái)1px的線(xiàn)條，就成了看起來(lái)2px寬的線(xiàn)條。

失敗的原因找到了：Canvas中的line把中線(xiàn)與像素的起點(diǎn)對(duì)齊了，而不是像素的中間點(diǎn)。

那么我們?cè)趺唇鉀Q這個(gè)蛋疼的問(wèn)題？也許有人已經(jīng)想到了：既然是因?yàn)閮蓚€(gè)的起點(diǎn)不一樣，那我們就把他們的起點(diǎn)變得一樣吧！

我們讓線(xiàn)條的中線(xiàn)和像素的中間點(diǎn)對(duì)齊就行了！

像素的中間點(diǎn)很好找，比如第2像素的中間點(diǎn)，依據(jù)圖上的解釋就是1.5像素的位置，那么x像素的中間點(diǎn)就是(x-0.5)px。

當(dāng)然，在不很?chē)?yán)謹(jǐn)?shù)膱?chǎng)合，你使用x+0.5也是可以的。

現(xiàn)在我們?cè)赾anvas上試試我們的研究結(jié)果。

代碼如下:

ctx.moveTo(100.5,100.5);

ctx.lineTo(200.5,100.5);

ctx.lineTo(200.5,200.5);

ctx.lineTo(100.5,200.5);

ctx.lineTo(100.5,100.5);

ctx.closePath();

ctx.lineWidth = 1;

ctx.strokeStyle = 'rgba(255,0,0,0.5)';

ctx.stroke();

看起來(lái)對(duì)了吧？

不過(guò)貌似這樣一來(lái)我們畫(huà)線(xiàn)的時(shí)候就非常糾結(jié)，難道每次都去加這個(gè)讓人郁悶的0.5？當(dāng)然不是，因?yàn)槲覀兇蟛糠謺r(shí)間都是用變量保存值的，就不用給每個(gè)值加0.5 了

而且，對(duì)于lineWidth>1 的線(xiàn)，我們也不用管它：因?yàn)橹挥芯€(xiàn)條寬1px的時(shí)候，這個(gè)問(wèn)題才最明顯。