前面我们了解到可以利用canvas标签，在原生js中构建画布然后画线段，和多边形，但是canvas也给我们封装了几个绘制图形的方法，我们可以直接拿来利用，这里我就不那么细说了，

    1.    var canvas = document.querySelector('#canvas');
    2.         canvas.width = 500;
    3.         canvas.height = 700;
    5.         // 创建了一个ctx变量，这就是我们的画笔 上下文
    6.         var ctx = canvas.getContext('2d')
    8.         // 形状 矩形，原型
    9.         ctx.beginPath()
    11.         // canvas 中 直接 提供的绘制矩形的方法rect（x,y,width,height)
    13.         ctx.rect(0, 0, 200, 100)
    14.         ctx.lineWidth = 5;
    15.         ctx.strokeStyle = 'red';
    16.         ctx.stroke();
    18.         // 填充颜色 fill填充
    20.         ctx.fillStyle = 'greenyellow'
    21.         ctx.fill();
    23.         // 绘制填充 矩形
    24.         ctx.fillRect(0, 300, 200, 50)
    26.         // 绘制描边矩形
    28.         ctx.strokeRect(0, 500, 300, 100);
    29.         ctx.beginPath();
    30.         var PI = Math.PI
    32.         // 绘制弧度arc(x,y,r,a,b)圆心坐标,半径,起始弧度,结束弧度,控制顺时针或逆时针(默认为顺时针)
    33.         // 逆时针默认为true
    35.         ctx.arc(200, 200, 100, 0, 2 * PI)
    36.         ctx.strokeStyle = 'orange'
    37.         ctx.closePath();
    38.         ctx.stroke();

    image.png
    如图所示，画布中由4个图形。其实也有一些小细节需要我们注意

    1. 上节我们说到当一条直线画完之后我们需要重新引入路径，不过那是对于线的问题，在这里，我连续画了4个图形而我只在开头写了 ctx.beginPath ,那这又是为啥呢

      其实也比较好理解，我们用的方法已经在内部自动封装好了 ctx.beginPath , 所以我们需要注意，不用自己额外去添加这句代码，

    2. 在这里我又重新将上面画图的代码复制了一遍，发现圆圈被填充了颜色，这是由于受到上面填充语句的影响，可是其他矩形没有任何变化，说明这个构造图片的方法连续使用不会出现页面乱画的现象，

      然后我在复制代码之前又在原代码最后加上了 ctx.beginPath 发现填充色消失不见，这里我就通过实践总结我的看法
      ctx.beginPath 定义上说是引入新路径，我也可以理解是在用方法绘制图形得时候，如果前面有我绘制的图形，但是我现在还需要在原来画布的基础上重新绘制别的图形，这里我就可以写入 ctx.beginPath ，这句代码能有啥作用呢，比如我前面3个图给了填充色，而我后面3个不需要填充色，则引入 ctx.beginPath
      简单的说，在原画布的基础上，为了不使用原方法上的一些属性，在此引入 ctx.beginPath,可以避免不必要的麻烦
      3 . 但矩形和圆还有前面的直线一样，相连的话话说需要 stroke （）方法，填充为fill（）方法
      4.如果在绘制矩形的时候需要填充fill 和描边stroke 则需要先填充后描边
      5.fillRect（x,y,width,height) 绘制的是实心矩形，不能描边
      6.strokeRect(x,,y,width,height) 绘制空心矩形，不能填充