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

在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如何保存恢復狀態的全部介紹，如果您想了解更多有關Html5視頻教程，請關注PHP 。

以上就是HTML5Canvas save如何保存恢復狀態？的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。