HTML5 Canvas: 二维上下文与当前状态，实时模式/保留模式

原文：

http://www.lifelaf.com/blog/?p=354

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “The 2D Context and the Current State”.

通过调用Canvas对象的getContext()方法所获取的HTML5二维上下文(CanvasRenderingContext2D对象)是所有绘图操作的起点 — 它包含了所有绘图操作所需的属性设置和操作方法。CanvasRenderingContext2D使用笛卡尔坐标系，绘图区域的左上角顶点为(0,0)，坐标值向右、向下递增。

除了绘图的属性和相关操作，CanvasRenderingContext2D还包含另外一个重要概念：当前状态 — 应用于整个Canvas绘图的一系列全局状态。这些状态包括：

• 转换矩阵。用于图像的伸缩、旋转、变形和位移。
• 剪切区。当调用clip()方法时产生。
• 上下文属性。包括：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign和textBaseline。

在图像渲染领域，存在“实时模式”(immediate mode)和“保留模式”(retained mode)的区别。HTML5 Canvas属于实时模式 — 每次当图像发生改变时，Canvas中所有的元素都需要重画。这种模式有一定的好处；比如，使用全局属性可以让滤镜效果的实现变得非常容易。一旦掌握了实时模式的运用，在Canvas上绘图就是一件很简单的事情 — 当图像有任何更新的时候，直接重画整个Canvas即可。

与此相反，在保留模式下，绘图板保存了绘制对象的集合，并通过显示列表(Display List)对这些对象进行操作。Flash和Silverlight都是在保留模式下工作的。对于一个应用程序，如果它需要多个记录自己状态的对象的话，保留模式非常有用。而对于充分利用Canvas特性的HTML5应用程序（游戏、动画等）来说，使用一张类似保留模式下的绘图板来保存绘制对象，将会让工作变得更加简单。

因此，如何在利用实时模式的好处的同时，加入保留模式开发方式的支持，是一个比较有趣的挑战。