canvas 1px 出現模糊解決方法及原理

關於canvas繪製1像素出現模糊的緣由及解決方法

canvas是html5中很是強大的功能，可是在繪製的時候若是出現1像素，例如畫一條1像素的線可能出現模糊狀況。

1、解決方法

網上比較常見的解決方法是+0.5

cxt.moveTo(x+0.5,y+0.5)
cxt.lineTo(x+0.5, y+0.5)

這樣確實可讓線從新變回清晰的狀態
由於把繪製線條封裝成一個函數，繪製多條線，屢次調用該函數，出現有的線是1px，有的線是2px。
因此只有理解了canvas出現模糊的原理才能更完全的解決

2、canvas繪製原理

canvas每條線都有一條無限細的中線，線由中線兩個伸展。

例如：
當起點是2px時，中線在2px的地方，向左延伸0.5px,向右延伸0.5px，因此這條線應該在1.5px到2.5px的地方，但實際上計算機的最小像素是1px，因此canvas會取一個折中的方法，分別再向左右延伸0.5px，顏色變成原來的一半，因此實際效果看起來變成了2px模糊的線條。

3、進一步的解決方法

瞭解了原理以後，就明白解決問題的根源起點應該在0.5的地方，這也是爲何x,y須要+0.5。當x,y作過計算不必定是整數的時候可能+0.5又出現模糊的狀況。因此作一個取整能夠保證不會出現模糊的狀況

cxt.moveTo(parseInt(x)+0.5, parseInt(y)+0.5)
cxt.lineTo(parseInt(x)+0.5, parseInt(y)+0.5)