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

本文翻译自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。

可以调用以下方法把Canvas的当前状态压入栈中:

context.save();  

也可以从当前的状态栈中取出最近一次存入的状态:

context.restore();  

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

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

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