我們?cè)赾anvas上繪制圖形的時(shí)候，經(jīng)常需要通過(guò)save()和restore()改變2D上下文的狀態(tài)。舉例來(lái)說(shuō)，你在繪制直線或矩形的時(shí)候需要一種strokStyle，在繪制下一條直線或矩形的時(shí)候需要另一種strokStyle。又或者是不同的填充色，旋轉(zhuǎn)角度等 當(dāng)使用其2D上下文在html5畫(huà)布上進(jìn)行繪制時(shí)，該2D上下文處于某種狀態(tài)。您可以通過(guò)操縱2D上下文屬性（例如fillStyle 和）來(lái)設(shè)置該狀態(tài)strokeStyle。所有這些操作總共稱為2D上下文state。 html5 Canvas畫(huà)布狀態(tài)示例繪圖狀態(tài)進(jìn)行壓棧和出棧的方法如下: context.save(); // 將一個(gè)狀態(tài)壓入狀態(tài)棧中. context.restore(); // 將最前面的狀態(tài)出棧，并設(shè)置到2d上下文中. 被保存在堆棧中后，您可以將多個(gè)狀態(tài)推送到該堆棧上，然后將其彈出。這是一個(gè)代碼示例: <canvas id="ex1" width="500" height="100" hljs-string">1px solid #cccccc;">HTML5 Canvas not supported</canvas>
<script>var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.fillStyle ="#66ff66";
context.stroke;
context.linewidth = 5;
context.fillRect (5, 5, 50, 50);
context.strokeRect(5, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect (65, 50);
context.strokeRect(65, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect (125, 50);
context.strokeRect(125, 50);
context.restore();
context.fillRect (185, 50);
context.strokeRect(185, 50);
context.restore();
context.fillRect (245, 50);
context.strokeRect(245, 50);
</script>這是在畫(huà)布上繪制時(shí)上述代碼的結(jié)果:
狀態(tài)棧的用處如果您更改畫(huà)布合成模式或轉(zhuǎn)換設(shè)置，并且需要在進(jìn)行更改之前先返回到設(shè)置，則狀態(tài)堆棧非常有用。通過(guò)保存和恢復(fù)構(gòu)圖模式或轉(zhuǎn)換設(shè)置，可以確保正確重置了它。否則，要返回到之前的確切設(shè)置可能會(huì)有些困難。 2D上下文的狀態(tài)有哪些?所有2D上下文屬性都是保存和還原狀態(tài)的一部分。但是，在畫(huà)布上繪制的卻不是。這意味著，在還原狀態(tài)時(shí)，您不會(huì)還原繪圖區(qū)域本身。您僅還原2D上下文設(shè)置（屬性值）。這些設(shè)置包括:
此列表并不詳盡。 隨著標(biāo)準(zhǔn)的發(fā)展，更多的屬性可能成為2D上下文狀態(tài)的一部分。 |
