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/