HTML5Canvas save怎么保存恢復狀態

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

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

在Canvas中也可以這樣，不過Canvas中的畫筆永遠只有一只。所以，如果要更換畫筆的顏色，就需要保存和恢復狀態。狀態其實就是畫布當前屬性的一個快照，包括：

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

當前的裁切路徑。

當前應用的變換（即平移、旋轉和縮放）。

Canvas中，使用save()方法來保存狀態，使用restore()方法來恢復狀態。Canvas狀態是以棧的方式來保存：每次調用save()方法，就會把當前狀態壓入棧頂保存；每次調用restore()方法，就會把棧頂的狀態取出來，并把畫布恢復到這個狀態，用這個狀態繪圖。

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();               // 恢復到 ② 的狀態, 棧: "red"，"green"
context.beginPath();
context.fillRect(70, 70, 60, 60);   // 用棧頂的狀態繪圖，填充"green"
context.restore();               // 恢復到 ① 的狀態, 棧: "red"
context.fillRect(90, 90, 20, 20);   // 用棧頂的狀態繪圖，填充" red "
context.fill();

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

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

save()方法和restore()方法都可以被調用任意多次，并且可以嵌套。記住，save()方法和restore()方法總是成對出現，每次調用restore()方法，都是恢復到最近一次調用save()方法時棧的狀態，并用該棧頂所保存的狀態進行繪制。

以上是HTML5Canvas save怎么保存恢復狀態的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！