canvas繪制路徑

1. 方法

   beginPath()             創建一個新的路徑
   lineTo()                描繪路徑
   closePath()             沿著路徑畫直線，並且畫點移動到路徑開頭
   stroke()                繪制形狀
   fill()                  填充形狀，會自動調用closePath方法

2. 畫一個實心六邊形

   const canvas = document.getElementById(‘canvas‘);
   const ctx = canvas.getContext(‘2d‘);
   
   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(100, 50);
   ctx.lineTo(130, 80);
   ctx.lineTo(100, 110);
   ctx.lineTo(50, 110);
   ctx.lineTo(20, 80);
   ctx.fill();
    
   

3. 畫一個空心六邊形

   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(100, 50);
   ctx.lineTo(130, 80);
   ctx.lineTo(100, 110);
   ctx.lineTo(50, 110);
   ctx.lineTo(20, 80);
   ctx.closePath();
   ctx.stroke();

canvas繪制路徑