路径

路径是线段的序列。2D canvas接口使用一种奇特的方式来描述这样的路径。路径的绘制都是间接完成的。我们无法将路径保存为可以后续修改并传递的值。如果你想修改路径，必须要调用多个方法来描述他的形状。

  1. <canvas></canvas>
  2. <script>
  3.   let cx = document.querySelector("canvas").getContext("2d");
  4.   cx.beginPath();
  5.   for (let y = 10; y < 100; y += 10) {
  6.     cx.moveTo(10, y);
  7.     cx.lineTo(90, y);
  8.   }
  9.   cx.stroke();
  10. </script>

本例创建了一个包含很多水平线段的路径，然后用stroke方法勾勒轮廓。每个线段都是由lineTo以当前位置为路径起点绘制的。除非调用了moveTo，否则这个位置通常是上一个线段的终点位置。如果调用了moveTo，下一条线段会从moveTo指定的位置开始。

当使用fill方法填充一个路径时，我们需要分别填充这些图形。一个路径可以包含多个图形，每个moveTo都会创建一个新的图形。但是在填充之前我们需要封闭路径（路径的起始节点与终止节点必须是同一个点）。如果一个路径尚未封闭，会出现一条从终点到起点的线段，然后才会填充整个封闭图形。

  1. <canvas></canvas>
  2. <script>
  3.   let cx = document.querySelector("canvas").getContext("2d");
  4.   cx.beginPath();
  5.   cx.moveTo(50, 10);
  6.   cx.lineTo(10, 70);
  7.   cx.lineTo(90, 70);
  8.   cx.fill();
  9. </script>

本例画出了一个被填充的三角形。注意只显示地画出了三角形的两条边。第三条从右下角回到上顶点的边是没有显示地画出，因而在勾勒路径的时候也不会存在。

你也可以使用closePath方法显示地通过增加一条回到路径起始节点的线段来封闭一个路径。这条线段在勾勒路径的时候将被显示地画出。