本節書摘來自異步社區《HTML5 Canvas開發詳解》一書中的第1章，第1.7節,作者： 【美】Steve Fulton , Jeff Fulton 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

1.7　2D上下文及其當前狀態

通過調用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就是使用這種模式。如果應用程序依賴多個擁有獨立狀態的對象，使用保留模式創建應用程序會很有用。許多能夠充分利用畫布功能的應用程序，如游戲、活動、動畫都是相同的。這些程序通常很容易在保留模式的繪圖界面下進行編碼，尤其對于初學者來說。

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

總結

以上是生活随笔為你收集整理的《HTML5 Canvas开发详解》——1.7　2D上下文及其当前状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。