使用 Cufon 渲染网页字体-5 Cufon 实现原理初探及应用 更新

look_w

使用 Canvas 绘制统计图在规定了整个应用接口后，我们就将使用 VML、Canvas、SVG 等 Web 页面图形绘画方案，来实现统计图表的绘画了。在此之前则不妨来首先了解一下，这些方案在浏览器应用环境上的差别，如下表 5 所示。
表 5. 浏览器 Web 页面绘图方案支持情况一览表
IEFirefoxOperaSafariGoogleChrome VML  5.0 以上支持不支持不支持不支持不支持 Canvas 不支持 1.5 以上支持 9.5 以上支持 3.0 以上支持 1.0 以上支持 SVG 不直接支持部分支持完全支持不直接支持不直接支持
显然的对于统计图表的绘画应用而言，使用 VML+Canvas 联合的方案是一个具有最大普适性的策略，而这事实上也正是 Cufon 所采用的图形绘画的解决方案。
仍然以饼图绘制为例。由这一策略出发，读者是不难理解如下代码所示的绘制基本业务逻辑的。
清单 12. 饼图绘画接口

1 2 3 4 5

…… case "pie":   return (isIE)?_drawVMLPie(data, dest, options):_drawCanvasPie(data, dest, options); break; ……

那么如何来实现代码中所给出的两个绘制接口 _drawVMLPie 和 _drawCanvasPie 呢？在此，我们则不妨从 _drawCanvasPie 的一些实现细节开始起，来逐步的了解在这一过程中，所普遍适用的一些开发原则和技巧。
了解 Canvas
首先需要简单的介绍一下 Canvas 本身，这实际上是一个由 HTML 5 标准所正式支持的 HTML 标记。因此，对于支持 Canvas 标记的浏览器而言，使用 Canvas 标记和使用其他传统 HTML 标记是没有任何不同的。
而在 HTML 5 中，一个 Canvas 标记所代表的就是一个独立的绘画区间。而一般的我们则将这一绘画区间称之为“画布”。
确立坐标系
显然的对于所有绘图而言，在画布上确立坐标系，都应该是整个绘图工作的第一步，Canvas 自然也不例外。而与传统意义上的二维平面坐标系不同，Canvas 坐标系的纵轴方向是自上而下的，缺省则将使用画布的左上角置为整个坐标系的（0,0）原点。
据此并根据前述说明，读者是不难完成如下代码所示的 Canvas 画布创建代码的，在此 Options 配置项“width”和“height”所代表的，则分别是整个画布的宽度和高度。
清单 13. 创建 Canvas 绘画区域

1 2 3 4

var canvas = document.createElement('canvas'); canvas.width = (options['width'])?options['width']:100; canvas.height = (options['height'])?options['height']:100; dest.appendChild(canvas);

创建画笔对象
在创建了 Canvas 对象后，我们并不能直接在 Canvas 画布上进心绘画，而是需要通过创建一个一个画笔对象，才能够实现在 Canvas 画布上的绘画。这一画笔对象的创建方法也非常简单，如下代码所示，其中，“2d”表明在此处将使用二维平面模式进行绘画。
清单 14. 创建画笔

1	var brash = canvas.getContext('2d');

绘画并填充扇形区域
那么，我们又该如何使用画笔对象，进行统计图表如饼图的绘画呢？从几何学角度来讲每个饼图其实都是由若干个扇形所组成的，所以饼图绘画的核心，其实也就在于每一个扇形的作画上。而对于 Canvas 而言以下两点则是需要读者特别了解的。

• 首先，Canvas 提供了点、线（包括弧线），以及闭合直线图形、圆（包括椭圆）的绘制方法，但对于其他非规则图形，如扇形等，Canvas 并没提供直接支持。
• 其次，Canvas 允许对任意一个闭合区间，使用颜色进行填充和边界绘制。