HTML5 Canvas-Oreilly.Canvas.Pocket.Reference (3)

本章的最后列举了一个案例，是利用canvas标签制作被称为折线图的相互关联的图形集。接下来的个别章节参考了canvas标准API的说明文档。
大量关于canvas的例子都是基于对变量c的操作。这里的c指的是canvas的CanvasRenderingContext2D对象，但是它的初始化却不像传统变量的初始化。为了让这些例子顺利的在电脑上运行，你自己必须得额外增加一些html的属性（比如画布的高度、宽度等等），然后像下面代码所示的那样初始化c:
var canvas = document.getElementById("my_canvas_id");
var c = canvas.getContext('2d');
下面展示的图形都是利用javascript往canvas里添加内容---把一个大的空旷的画布变成高分辨率，便于打印的图形。

画线以及填充多边形
为了能够在画布上描绘出线条并且用这些线条来围成一个封闭的区域，你必须得首先定义路径图。路线图就是指一条或者多条子路径构成的总路径。而子路径指的则是由两个或多个点相连的线段（或者待会将会看到的曲线段）。利用beginPath（）方法开始总路径的设置，而用moveTo（）方法来确定子路径。一旦你利用moveTo确定了子路径的起点，接下来就可以使用lineTo方法指向一个新的端点，即形成了一条新的线段。下面的代码定义了一个包含两条线段的总路径：
c.beginPath(); // Start a new path
c.moveTo(20, 20); // Begin a subpath at (20,20)
c.lineTo(120, 120); // Add a line to (120,120)
c.lineTo(20, 120); // Another from there to (20,120)
上面的代码很简洁的定义了一条总路径；但是画布上却依然空空如也。为了在路径上显示这两条线段，需要调用stroke（）方法，而如果想要往这两条线段包围的区域里实现填充效果，则需要调用fill方法：
c.fill(); // Fill a triangular area
c.stroke(); // Stroke two sides of the triangle
这段代码（另加上一些线条的颜色、线宽等属性）绘制出来的图如下1-2所示：

Figure 1-2

 

注意到之前定义的子路径不是封闭的。它只是由两条线段组成，终点并没有和起点相交汇。也就是说并没有围成一个封闭的区域。fill方法则好像是在起点和终点间直接加了一条直线，将“开放”的区域给填充起来。这也这是为什么之前的代码可以填充一个角，而stroke方法绘制的结果只是一个角的两条边。

当然如果你想画出之前所示的三角形的三条边，那就得使用closePath方法来连接起点和终点了（还可以利用lineTo方法连接起点和终点），但是做完这些会发现起点和终点实际上并没有完全重合。所以，如果使用closePath方法，尽量使用宽线使效果
更真实）。