canvas绘制路径

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();