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