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在移動端裝置上模糊出現鋸齒邊
在繪製的過程中畫布內容的實際大小是根據 canvas 的 width 與 height 屬性設定的，而 style 或者css設定的width 與 height 只是簡單的對畫布進行縮放。canvas相當於乙個 img 其中畫布的 width 與 height 屬性，相當於 img 中的原始尺寸 我...
移動端 1px解決方案
var viewport document.queryselector meta name viewport var scale 1 window.devicepixelratio viewport.setattribute content width device width,initial sc...
移動端1px解決方案
lang en charset utf 8 name viewport content initial scale 1,maximum scale 1,minimum scale 1,user scalable no,width device width 移動端1px邊框問題title ul,li ...