HTML5Canvas save怎么保存恢復(fù)狀態(tài)

這篇文章主要介紹HTML5Canvas save怎么保存恢復(fù)狀態(tài)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

在繪畫的時(shí)候，經(jīng)常會(huì)有這種情況，本來正在用綠色筆畫，突然需要用紅色筆畫幾筆，但畫完了之后又要換成綠色筆。如果是在現(xiàn)實(shí)中作畫，可以把筆蘸上不同的墨水，畫了之后又蘸上之前的墨水，或者準(zhǔn)備幾只筆，要用哪只就選哪只。

在Canvas中也可以這樣，不過Canvas中的畫筆永遠(yuǎn)只有一只。所以，如果要更換畫筆的顏色，就需要保存和恢復(fù)狀態(tài)。狀態(tài)其實(shí)就是畫布當(dāng)前屬性的一個(gè)快照，包括：

圖形的屬性值，如strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor等。

當(dāng)前的裁切路徑。

當(dāng)前應(yīng)用的變換（即平移、旋轉(zhuǎn)和縮放）。

Canvas中，使用save()方法來保存狀態(tài)，使用restore()方法來恢復(fù)狀態(tài)。Canvas狀態(tài)是以棧的方式來保存：每次調(diào)用save()方法，就會(huì)把當(dāng)前狀態(tài)壓入棧頂保存；每次調(diào)用restore()方法，就會(huì)把棧頂?shù)臓顟B(tài)取出來，并把畫布恢復(fù)到這個(gè)狀態(tài)，用這個(gè)狀態(tài)繪圖。

context.fillStyle = "red";
context.fillRect(10, 10, 180, 180);
context.fill();
context.save();                 // ① 棧: "red"
context.fillStyle = "green";
context.fillRect(30, 30,140,140);
context.save();                 // ② 棧: "red"，"green"
context.fillStyle = "blue";
context.fillRect(50, 50, 100,100);
context.restore();               // 恢復(fù)到 ② 的狀態(tài), 棧: "red"，"green"
context.beginPath();
context.fillRect(70, 70, 60, 60);   // 用棧頂?shù)臓顟B(tài)繪圖，填充"green"
context.restore();               // 恢復(fù)到 ① 的狀態(tài), 棧: "red"
context.fillRect(90, 90, 20, 20);   // 用棧頂?shù)臓顟B(tài)繪圖，填充" red "
context.fill();

上述代碼中，首先繪制第一個(gè)紅色的矩形。接著調(diào)用第一個(gè)save()方法，把第一個(gè)紅色矩形的狀態(tài)壓棧，此時(shí)棧中只有一個(gè)元素"red"，記為 ①。然后把狀態(tài)設(shè)置為"green"，繪制第二個(gè)矩形，此時(shí)繪制出的是綠色矩形。接著調(diào)用第二個(gè)save()方法，把第二個(gè)綠色矩形的狀態(tài)壓棧，此時(shí)棧中有兩個(gè)元素"red"，"green"，棧頂元素為"green"，記為 ②。接著繪制第三個(gè)藍(lán)色矩形，此處沒有調(diào)用save()方法，棧的狀態(tài)不變。接著調(diào)用restore()方法，恢復(fù)到 ② 的狀態(tài)，繪制第四個(gè)矩形，此時(shí)棧頂元素為"green"，故繪制出綠色矩形。接著再調(diào)用restore()方法，恢復(fù)到 ① 的狀態(tài)，繪制第五個(gè)矩形，此時(shí)棧頂元素為"red"，故繪制出紅色矩形。

從本例可以看到，通過save-restore組合把代碼包裹起來，實(shí)質(zhì)上是把save()方法和restore()方法之間的樣式包裹起來，這樣一來，它們就不影響后面繪制的圖形。

save()方法和restore()方法都可以被調(diào)用任意多次，并且可以嵌套。記住，save()方法和restore()方法總是成對(duì)出現(xiàn)，每次調(diào)用restore()方法，都是恢復(fù)到最近一次調(diào)用save()方法時(shí)棧的狀態(tài)，并用該棧頂所保存的狀態(tài)進(jìn)行繪制。

以上是HTML5Canvas save怎么保存恢復(fù)狀態(tài)的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！