canvas基礎

1.繪製矩形

 fillRect(x, y, width, height)繪製一個填充的矩形

 strokeRect(x, y, width, height)繪製一個矩形的邊框

 clearRect(x, y, width, height)清除指定矩形區域，讓清除部分徹底透明

2.繪製路徑

    beginPath()新建一條路徑，生成以後，圖形繪製命令被指向到路徑上生成路徑。

 closePath()閉合路徑以後圖形繪製命令又從新指向到上下文中。

 stroke()經過線條來繪製圖形輪廓。

 fill()經過填充路徑的內容區域生成實心的圖形。

   //三角形
   ctx.beginPath(); //生成路徑第一步，重置，開始繪製新得路徑
  ctx.moveTo(175,50); //起點
  ctx.lineTo(200,25);
  ctx.lineTo(200,75); //終點
  ctx.fill(); //fill方法 填充內容區域生成實心得圖形
 //空心三角形
  ctx.beginPath();
   ctx.moveTo(225,50);
  ctx.lineTo(250,25);
  ctx.lineTo(250,75);
  ctx.closePath();
  ctx.stroke(); //strke()方法經過線條繪製輪廓，不會自動閉合，須要用到closePath()閉合;