在之前做移動端小游戲幸運轉盤、九宮格轉盤，使用到了 canvas ，也是第一次在項目中使用 canvas 來實現。
近期測試人員反應 canvas 繪制的內容太模糊，心想着用 canvas 繪制出來的怎么會模糊，先前也有考慮到適配不同尺寸的移動設備，擔心直接使用 img 或者設置 background 會使圖片拉伸而變得模糊，所以使用 canvas 來繪制轉盤與九宮格，精確的計算每個物體所在的坐標以及尺寸繪制出來的，怎么會模糊。
然而將繪制的內容與頁面中的其他文字或者圖片作對比后，發現使用 canvas 繪制輸出的確實比直接使用標簽輸出的來的模糊，如下兩張截圖：
可以看出轉盤中或者九宮格中的圖片跟蚊子，明顯與下面直接使用HTML標簽顯示的文字來的模糊。
在網上查了下 canvas 模糊的問題，確實存在，也有不少的解決方法。
有一種說法是說因為繪制的坐標不是整數級的坐標，所以會變得模糊，所以在計算坐標的時候可以使用 Math.floor 將坐標取整，這樣繪制就會變得清晰。
個人覺得這種說法並不實際，因為在實現的時候就是要計算到每個點每條線的具體位置，角度等等的精確值，這樣粗糙的取整，會使得繪制出來的整體跟設計圖上有比較大的出入，而且本身也無法維護讓每次繪制都是在整數級的坐標上，比如繪制一個圓，要如何讓每個點都是在整數坐標的像素點上？
還有一種方法比較簡單，容易實現，而且效果在目前看來還是不錯的。
先補充說明一個基礎知識點，在使用 canvas 的時候，要設置畫布的大小，要使用的是 canvas 的 width 與 height 屬性，而不是設置 canvas 的 style 或者CSS樣式中的 width 與 height 。
因為在繪制的過程中畫布內容的實際大小是根據 canvas 的 width 與 height 屬性設置的，而 style 或者CSS設置的width 與 height 只是簡單的對畫布進行縮放。
這里可以將 canvas 比喻為一個 img ，其中畫布的 width 與 height 屬性，相當於 img 中圖片的原始尺寸；我們使用JS在畫布上繪制的內容對應的就是 img 中的圖片；而 style 或者CSS設置的 width 與 height ，就是設置 canvas 或者 img 在頁面上要顯示的大小。
因此這里要解決模糊的做法，就是將這張“圖片”變得高清一點，然后縮小了來顯示。具體實現就是將畫布的大小設置為實際顯示大小的兩倍，然后在canvas的css屬性設置正常顯示的寬高，比如，要顯示一個100*200的畫布，可以這樣寫：
<canvas width="200" height="400" style="width: 100px;height: 200px;"></canvas>
如此就相當於畫了一張200*400的圖片，然后設置他顯示成100*200的大小，這樣一來就變得清晰了。需要注意的是，這樣將畫布放大之后，繪制的過程中對應的那些坐標，長度等等都要相應的放大，比如原本在100*200的畫布上繪制 ctx.arc(10,10,5,0,Math.PI*2) ，現在在200*400的畫布上就得改成 ctx.arc(20,20,10,0,Math.PI*2) 。如此修改后的效果如下兩張截圖：
現在相比之前，明顯清晰了許多，畫布中的文字和圖片與下面HTML標簽直接輸出的一樣清楚，模糊的問題解決了，不會再覺得是擼多了，眼睛花。
另外，如果要比較好的解決canvas模糊的問題，可以使用JS類庫 hidpi-canvas-polyfill 來解決，由於我也沒試過，就不多說了，想了解的可以查看html5 canvas繪制圖片模糊的問題，這里有介紹這個插件的使用方法。
This entry was posted in CANVAS, CSS, H5 & CSS3, HTML, HTML5, JavaScript, JS, Web, 總結歸納 and tagged CANVAS, CSS,H5，HTML5，JS, HTML, JavaScript, WEB, 總結歸納. Bookmark the permalink.