【学习笔记25】画布canvas+案例

  canvas 属于html元素 H5新元素 需要结合js ,主要用来绘制2d图形
    在页面上放置一个canvas元素 就相当于放置了一块画布
    可以绘制路径 矩形 圆形 字符 图像
    属性：
      width    默认值 300px
      height   默认值 150px
      注意点：canvas需要写闭合标签
      <canvas></canvas>
      一般不建议使用css设置它的宽高
    方法：
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, 20, 20);
      fillRect(x,y,width,height)
          绘制一个矩形图案（填充）
      strokeRect(10, 60, 50, 50)
          绘制矩形边框
      clearRect(10, 10, 100, 100)
        清除指定矩形区域，让清除部分完全透明
      beginPath()
        新建一条路径
        然后通常会使用moveTo去设置你的起始位置
        然后去绘制
      closePath()
        闭合路径
        如果我们绘制的路径自己就是闭合的 那我们不需要调用这个方法
      fill()
        填充路径的内容区域 可以不用 closePath()
      stroke()
        通过线条绘制图形轮廓