《HTML5 canvas开发详解（第2版）》——1.8　2D环境及其当前状态

简介：

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第1章，第1.8节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8　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就是使用这种模式。如果应用程序依赖多个拥有独立状态的对象，使用保留模式创建应用程序会很有用。许多能够充分利用画布功能的应用程序（如游戏、活动、动画）都是相同的。这些程序通常很容易在保留模式的绘图界面下进行编码，尤其对于初学者来说。

这里面临的挑战是，既要利用即时模式绘图界面的优势，又要为代码增加更多的功能，以使程序就像工作在保留模式下一样。本书将讨论改善即时模式操作方式的策略，以及如何通过代码使其很容易操作。