《HTML5 canvas開發詳解（第2版）》——1.8 2D環境及其目前狀态

本節書摘來自異步社群《html5 canvas開發詳解（第2版）》一書中的第1章，第1.8節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

通過調用canvas對象的getcontext()方法可以獲得html5的2d環境對象（canvas renderingcontext2d對象）。所有操作都要通過該對象進行。canvasrenderingcontext2d對象包含了在畫布上繪圖所需的所有方法和屬性。canvasrenderingcontext2d（簡稱環境，後同）采用畫布左上角為原點（0，0）的笛卡爾坐标系，坐标軸向右、向下為正方向。

然而，所有這些屬性和方法都與目前狀态關聯使用。目前狀态是一個必須掌握的概念。它可以幫助讀者真正了解html5 canvas的工作方式。實際上，目前狀态是一個繪制狀态的堆棧，這些狀态可以應用到整個畫布。在畫布上繪制時将操作這些狀态。主要包括以下狀态。

變換矩陣：縮放、旋轉、變換以及平移的方法。

裁切區域：通過clip()方法建立。

上下文屬性：包括strokestyle、fillstyle、globalalpha、linewidth、linecap、line、join、miterlimit、shadowoffsetx、shadowoffsety、shadowblur、shadowcolor、global、compositeoperation、font、textalign和textbaseline。

不必擔心，雖然讀者現在還不熟悉這些屬性，但是後面3章将深入讨論這些屬性。

讀者是否還記得本章前面讨論的即時模式與保留模式？canvas是一個即時模式的繪圖界面，這就意味着如果什麼東西發生了變化就需要即時重新繪制。這樣做有以下好處：例如，全局屬性很容易将效果應用到整個螢幕。一旦讀者想好了，每次重新繪制螢幕的動作都有一個直接并且簡單的畫布繪制更新過程。

另一個方面，保留模式采用一個繪制界面儲存一組對象，并通過一個顯示清單來操作。flash和silverlight就是使用這種模式。如果應用程式依賴多個擁有獨立狀态的對象，使用保留模式建立應用程式會很有用。許多能夠充分利用畫布功能的應用程式（如遊戲、活動、動畫）都是相同的。這些程式通常很容易在保留模式的繪圖界面下進行編碼，尤其對于初學者來說。

這裡面臨的挑戰是，既要利用即時模式繪圖界面的優勢，又要為代碼增加更多的功能，以使程式就像工作在保留模式下一樣。本書将讨論改善即時模式操作方式的政策，以及如何通過代碼使其很容易操作。