繪製線段

呼叫lineTo()方法繪製線段。lineTo(x, y)方法把當前點和lineTo()方法指定的點(x, y)用線段連線起來。

如果要繪製多條線段，可以重複呼叫該方法。第一次呼叫，當前點為子路徑的起點，以後每次呼叫，都會把上一次的終點作為本次的起點。我們使用lineTo()方法繪製兩條平行線，程式碼如下：

1. context.lineWidth =10;
2. context.strokeStyle ='#444';
3. context.beginPath();
4. context.moveTo(20,20);
5. context.lineTo(220,20);
6. context.stroke();
7. context.beginPath
   ();
8. context.moveTo(20,40);
9. context.lineTo(220,40);
10. context.stroke();

執行效果如圖 4‑5 所示：

說明：

呼叫stroke()方法繪製封閉圖形時，closePath()方法就顯得尤為重要。線上條比較細的時候，還不易覺察，線上條比較粗的時候，就會看到，在路徑的起點和終點交匯留下的缺口。如果刪除上述程式碼的context.closePath()，就會一目瞭然看到這個缺口。