摘要：常見優(yōu)化方案模糊問題旋轉(zhuǎn)效果離屏自定義圖片尺寸實踐離屏旋轉(zhuǎn)效果實踐旋轉(zhuǎn)的雪花更新關(guān)于模糊問題前幾天研究的時候剛好趕上作者發(fā)布新版本，發(fā)現(xiàn)新版本截屏出來的效果比我對舊版本處理后畫布尺寸都設(shè)為倍的效果更好。

實踐demo——“canvas離屏、旋轉(zhuǎn)效果實踐——旋轉(zhuǎn)的雪花”

前幾天研究html2Canvas的時候剛好趕上作者發(fā)布新版本，發(fā)現(xiàn)新版本截屏出來的效果比我對舊版本處理后(畫布尺寸都設(shè)為2倍)的效果更好。
扒源碼的時候發(fā)現(xiàn)他們并沒有直接設(shè)為兩倍尺寸，而是先獲取當前dom結(jié)構(gòu)的scale，用當前dom的scale去設(shè)置canvas的畫布尺寸比。
我自己手機上測試時打印出來的dom的scale顯示為3倍尺寸，所以我設(shè)置canvas兩倍畫布尺寸的時候，其實還是會模糊的，不過對比1倍尺寸的是要清晰很多了。

問題原因

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

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

解決辦法

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

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

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

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

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

定義離屏canvas，在離屏canvas上設(shè)定畫布尺寸并繪制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標簽及實際顯示尺寸，畫出一個標準尺寸的大圖，然后自適應(yīng)到實際顯示的canvas上；
二是離屏canvas的緩存效果可以大大提升canvas的性能(當然像上述那樣粗糙的代碼，是體現(xiàn)不出這一效果的)。

不足

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

剛開始畫圖的時候很糾結(jié)的一個問題就是：canvas畫png圖片時，不同屏幕尺寸要配多大的圖、配幾套。后來在解決上述“離屏canvas”的問題后，這個問題也就迎刃而解了：drawImage函數(shù)可以設(shè)定將圖片繪制成多大的，而不限定于圖片本身的尺寸。

這個問題解決之后，就只需要一套圖片就好了，還可以使圖片大小自適應(yīng)屏幕、隨顯示界面縮放。

canvas中有兩個很好用的東西：旋轉(zhuǎn)和保存狀態(tài)。

以畫圓的不同角度的半徑為例，正常情況下我們要根據(jù)圓半徑、線的角度和圓心的位置計算得出線的端點坐標P1{x1,y1}、P2{x2,y2}，然后畫一條P1到P2的線，代碼中的計算量不小。不過canvas中我們有更好的解決辦法：

1.定位筆觸到圓心位置{x,y}

ctx.translate(x,y)

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

ctx.rotate(Math.PI*2 * angle);

3.畫一條{0,0}到{r,0}的線即可

ctx.beginPath();
ctx.lineTo(0, 0);
ctx.lineTo(r, 0);
ctx.stroke();

canvas旋轉(zhuǎn)方式畫線步驟解讀：

筆觸定位相當于是定畫布原點的位置，旋轉(zhuǎn)畫布則是以原點為圓心順時針旋轉(zhuǎn)了x/y坐標系，旋轉(zhuǎn)后的效果是將x正半軸與要畫的線重合，自然就相當于直接畫一條{0,0}到{r,0}的線。

另外一定要注意：

修改畫布坐標系(定原點、旋轉(zhuǎn)畫布)之前一定要保存狀態(tài)，畫完線后一定要重載狀態(tài)！不然你會很容易被自己改過的坐標系玩死的。