canvas 畫圖圖片變模糊問題
問題描述
-
在使用 canvas 對圖片進行編輯導出圖片之后發現圖片和原圖相比變得模糊了
-
canvas 畫圖線條變粗
問題產生原因
-
該問題在 PC 下面並不會產生，原因是移動端現在基本都是 Retina 屏(高倍屏)，當在二倍屏下的時候，會以實際像素的兩個像素點來描述一個像素，這個時候 canvas 在屏幕下面就等於占據了雙倍的空間，就和圖片被放大了兩倍一樣，所以經過 canvas 編輯的圖片會變得模糊
-
canvas 畫線的方式並不是從頭開始畫的，而是從無限細的一像素的中位線的位置開始畫的，然后左邊占一半右邊占一半的方式來畫一像素的線條，這個時候計算機是不會繪制小余 1 像素的，所以這個時候就會自然的向左右延伸，這個時候就會出現兩個像素的線條了
解決方案
- 這個問題的解決思路簡單來說就是將 canvas 放大為原來的兩倍，繪制 canvas 的文字線條也要放大（放大倍數視實際渲染倍數決定），再將它放在一倍的空間下面。
實際渲染倍率 = devicePixelRatio / backingStoreRatio;
devicePixelRatio 設備像素比，代表用幾個像素點的寬度來顯示一個像素的寬度
backingStorePixelRatio 代表了使用幾個像素來存儲一個像素的信息，在 ios6 當中這個值為 2，所以這個時候和屏幕像素比率為 1，也就是實際渲染倍率為 1，這個時候不做任何處理也不會出現變模糊的情況
// 設置畫布的實際渲染大小，只是簡單的對畫布進行縮放
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;
// 以實際渲染倍率來放大畫布
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
- 使用方法 1 也可以同時解決問題 2，更簡單但是治標不治本的方法，只需要根據需求讓線條偏移 0.5 像素，糾正 canvas，讓計算機不自動多渲染就好了