转 Cufon在渲染网页字体你不知道的事

				
 <style> 
  .introduction { font-family:‘Baroque Script‘;} 
 </style> 
……
 <p class="introduction" style="font-size:36px"><?php echo $introduction; ?></p> 
 <p class="introduction" style="font-size:24px; text-align:right">
 <?php echo $leader;?></p> 

				
 <script src="Baroque_Script_400.font.js" type="text/javascript"></script> 

				
 <script> 
 Cufon.replace(‘p‘); 	
 </script> 

				
 Cufon.set("配置项名称", 配置项值 ) 

				
 Cufon.replace("选择符", {"配置项 1" : 值 , "配置项 2": 值 , …… }); 

				
 Cufon.replace("#id1", {fontFamily : "Baroque Script"}); 
 Cufon.replace("#id2", {fontFamily : "Whiteboard Modern Demo"}); 

				
 var pie = [ 
  {"color" : "red", "percent" : 20}, 
  {"color" : "green", "percent" : 40}, 
  {"color" : "blue", "percent" : 40} 
 ]; 

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



清单 13. 创建 Canvas 绘画区域

				
 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. 创建画笔

				
 var brash = canvas.getContext(‘2d‘); 

绘画并填充扇形区域

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

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

当然，结合一定的数学知识，尤其是三角函数知识，笔者相信这一问题其实并不难解决。为方便起见，笔者在此将通过代码注解的方式，向读者来介绍在这一过程中的一些关键所在，以供读者参考。

清单 15. 绘画并填充扇形

清单 16. VML 基本应用范例

				
 <p> 
  <v:line from="0,0" to="100,0" /> 
 </p> 

因此，在 VML 下动态创建图形的过程，其实也就是动态创建 VML 语言标记并将其附加到画布（即某一标记）下的过程，这二者是完全一致的。

• behavior 风格的使用。

这是 VML 应用另外一个与众不同之处。在 VML 的规范中，开发者如果希望使用 VML 技术来进行页面的绘画，则不仅仅需要如一般 XML 语言一样，在 Web 文档中引入这一语言的名称空间（VML 的名称空间为“urn:schemas-microsoft-com:vml”），还需要确保所有 VML 标记，具有值为“url(#default#VML)”的 behavior 风格。否则的话，IE 浏览器是不会对其进行解析和处理的。这也正是读者可以在大部分 VML 应用中，看到有类似如下代码所示的 CSS 风格说明的原因所在。

清单 17. 需要为标记增加 behavior 风格，才能为 IE 解析

				
 <!--[if IE]> 
 <style>cvml\:* { behavior: url(#default#VML); }</style> 
 <![endif]-->