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

2022-08-05 17:21:20 字數 750 閱讀 4184

canvas是html5中非常強大的功能,但是在繪製的時候如果出現1畫素,例如畫一條1畫素的線可能出現模糊情況。

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

cxt.moveto(x+0.5,y+0.5)

cxt.lineto(x+0.5, y+0.5)

這樣確實可以讓線重新變回清晰的狀態

因為把繪製線條封裝成一個函式,繪製多條線,多次呼叫該函式,出現有的線是1px,有的線是2px。

所以只有理解了canvas出現模糊的原理才能更徹底的解決

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

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

瞭解了原理之後,就明白解決問題的根源起點應該在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)

本文**於:canvas 1px 出現模糊解決方法及原理