常見的canvas優化模糊問題旋轉效果

實踐demo——「canvas離屏、旋轉效果實踐——旋轉的雪花」

前幾天研究html2canvas的時候剛好趕上作者發布新版本，發現新版本截圖出來的效果比我對舊版本處理後(畫布尺寸都設為2倍)的效果更好。扒原始碼的時候發現他們並沒有直接設為兩倍尺寸，而是先獲取當前dom結構的scale，用當前dom的scale去設定canvas的畫布尺寸比。我自己手機上測試時列印出來的dom的scale顯示為3倍尺寸，所以我設定canvas兩倍畫布尺寸的時候，其實還是會模糊的，不過對比1倍尺寸的是要清晰很多了。

問題原因查閱canvas的api就可以知道，想要獲得精確地線條，必須對線條是如何描繪出來的有所理解。

首先要清楚一點：canvas畫線時的定位定的是線條中線的位置，根據線條的寬度再向兩邊延伸，如果延伸出去的線條沒有佔滿1px，不足的部分將會以實際筆觸顏色的一半色調來填充。所以最後我們實際看到的效果就是：1px的線條變寬了，且變模糊了，效果如左圖所示：

解決辦法

根據問題原因我們知道：只要從線條中線開始向外延伸部分佔滿1px，就不會出現線條變寬且模糊的問題了。

最簡單的辦法是畫線時根據需求將線條定位移動0.5px，不過這是治標不治本的方法，只能用來驗證這個方法是不是正確的。

我們還可以將畫布尺寸設為顯示尺寸的2倍，這相當於用畫圖時的兩個畫素點去填充實際顯示的乙個畫素點，這樣就能很好的解決canvas顯示模糊的問題了。

canvas.setattribute('width', x * 2);
canvas.setattribute('height', y * 2);
canvas.style.width = x + 'px';
canvas.style.height = y + 'px';

用這種方法要記得：各種布局尺寸也要做相應變化。

定義離屏canvas，在離屏canvas上設定畫布尺寸並繪製canvas：

var offscreencanvas = document.createelement('offscreencanvas');
var offscreenctx = offscreencanvas.getcontext('2d');

然後將畫好的離屏canvas繪製到實際顯示的canvas上：

ctx.drawimage(offscreencanvas, 0, 0, offscreencanvas.width, offscreencanvas.height,
0, 0, canvas.width, canvas.height);

好處一是可以不受限於html標籤及實際顯示尺寸，畫出乙個標準尺寸的大圖，然後自適應到實際顯示的canvas上；

二是離屏canvas的快取效果可以大大提公升canvas的效能(當然像上述那樣粗糙的**，是體現不出這一效果的)。

不足

離屏canvas一定要畫好之後才能繪製到實際顯示的canvas上，這就導致哪些有延時的元素不方便這樣用(如、自定義字型等)。針對這一問題，目前我還沒有找到好的解決辦法。

剛開始畫圖的時候很糾結的乙個問題就是：canvas畫png時，不同螢幕尺寸要配多大的圖、配幾套。後來在解決上述「離屏canvas」的問題後，這個問題也就迎刃而解了：drawimage函式可以設定將繪製成多大的，而不限定於本身的尺寸。

這個問題解決之後，就只需要一套就好了，還可以使大小自適應螢幕、隨顯示介面縮放。

canvas中有兩個很好用的東西：旋轉和儲存狀態。

以畫圓的不同角度的半徑為例，正常情況下我們要根據圓半徑、線的角度和圓心的位置計算得出線的端點座標p1、p2，然後畫一條p1到p2的線，**中的計算量不小。不過canvas中我們有更好的解決辦法：

1.定位筆觸到圓心位置

ctx.translate(x,y)

2.根據線的角度旋轉畫布angle圈(angle=1時表示順時針旋轉一圈)

ctx.rotate(math.pi*2 * angle);

3.畫一條到的線即可

ctx.beginpath();
ctx.lineto(0, 0);
ctx.lineto(r, 0);
ctx.stroke();

canvas旋轉方式畫線步驟解讀：筆觸定位相當於是定畫布原點的位置，旋轉畫布則是以原點為圓心順時針旋轉了x/y座標系，旋轉後的效果是將x正半軸與要畫的線重合，自然就相當於直接畫一條到的線。

另外一定要注意：

修改畫布座標系(定原點、旋轉畫布)之前一定要儲存狀態，畫完線後一定要過載狀態！不然你會很容易被自己改過的座標系玩死的。

常見的canvas優化模糊問題旋轉效果

關於Canvas模糊的問題

canvas06 canvas線模糊問題

canvas常見問題處理

常見的canvas優化 模糊問題 旋轉效果

關於Canvas模糊的問題

canvas06 canvas線模糊問題

canvas常見問題處理

相關推薦

常見的canvas優化模糊問題旋轉效果