有時(shí)候，我們?cè)赾anvas上繪制圖形的時(shí)候，經(jīng)常需要改變2D上下文的狀態(tài)。舉例來(lái)說(shuō)，你在繪制直線或矩形的時(shí)候需要一種strokStyle，在繪制下一條直線或矩形的時(shí)候需要另一種strokStyle。又或者是不同的填充色，旋轉(zhuǎn)角度等等。
我們不可能在繪制圖形之前就設(shè)置好所有圖形的狀態(tài)，但是我們可以將當(dāng)前的狀態(tài)壓棧到一個(gè)狀態(tài)棧中。在這個(gè)狀態(tài)棧中，最后壓入的狀態(tài)將最先被彈出。通過(guò)這種方式我們可以非常方便的恢復(fù)到前一次的繪圖狀態(tài)。
HTML5 CANVAS繪圖狀態(tài)的例子
將一個(gè)繪圖狀態(tài)進(jìn)行壓棧和出棧的方法如下：
- context.save(); // 將一個(gè)狀態(tài)壓入狀態(tài)棧中
-
- context.restore(); // 將最前面的狀態(tài)出棧，并設(shè)置到2d上下文中
對(duì)于一個(gè)狀態(tài)棧，你可以壓入多個(gè)狀態(tài)，然后在將它們依次彈出。來(lái)看下面的例子：
- var canvas = document.getElementById("ex1");
- var context = canvas.getContext("2d");
-
- context.fillStyle ="#66ff66";
- context.strokeStyle="#990000";
- context.lineWidth = 5;
-
- context.fillRect (5, 5, 50, 50);
- context.strokeRect(5, 5, 50, 50);
-
- context.save();
-
- context.fillStyle = "#6666ff";
-
- context.fillRect (65, 5, 50, 50);
- context.strokeRect(65, 5, 50, 50);
-
- context.save();
-
- context.strokeStyle = "#000099";
-
- context.fillRect (125, 5, 50, 50);
- context.strokeRect(125, 5, 50, 50);
-
- context.restore();
-
- context.fillRect (185, 5, 50, 50);
- context.strokeRect(185, 5, 50, 50);
-
- context.restore();
-
- context.fillRect (245, 5, 50, 50);
- context.strokeRect(245, 5, 50, 50);
上面的代碼得到的結(jié)果如下：
狀態(tài)棧的用處
狀態(tài)棧對(duì)于改變canvas的合成模式，圖形的轉(zhuǎn)換設(shè)置和在需要回到以前設(shè)置的狀態(tài)的場(chǎng)景中十分有用。
通過(guò)保存和恢復(fù)合成模式或圖形轉(zhuǎn)換設(shè)置，你可以確保它們被正確的重置。否則，你要想恢復(fù)到以前設(shè)置的某種狀態(tài)時(shí)十分困難的。
2D上下文的狀態(tài)有哪些?
所有的2D上下文的屬性都是可以保存和恢復(fù)的屬性。你在恢復(fù)一個(gè)狀態(tài)的時(shí)候，繪制區(qū)域并不會(huì)自動(dòng)進(jìn)行恢復(fù)。你恢復(fù)的僅僅是2D上下文的設(shè)置(屬性值)，這些設(shè)置包括：
- fillStyle
- font
- globalAlpha
- globalCompositionOperation
- lineCap
- lineJoin
- lineWidth
- miterLimit
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
- strokeStyle
- textAlign
- textBaseline
- clipping區(qū)域
- 轉(zhuǎn)換矩陣
上面的列表并不是完整的列表。還有更多的屬性屬于2D上下文狀態(tài)的一部分。
本文版權(quán)屬于jQuery之家，轉(zhuǎn)載請(qǐng)注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201507252298.html
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。