在同一个canvas中绘制多个不同形状，颜色的图形

今日踩坑
在同一个canvas中绘制多个不同形状，颜色的图形时，后面的总是将前面的颜色覆盖
解决方法：
beginPath() 和 closePath()
这两个函数可以起到类似 <div> 的作用，用它来把每个图形包围，就可以绘制不同颜色的图形了。
例如

 // 绘制矩形
        ctx.beginPath()
        ctx.rect(486, 455, 58, 43);
        ctx.strokeStyle = '#2DE0A5';
        ctx.stroke();
        ctx.fillStyle = 'rgba(45, 224, 165, 0.3)';
        ctx.fill();
        ctx.closePath()

        ctx.beginPath()
        ctx.rect(486, 498, 58, 43);
        ctx.strokeStyle = '#2DE0A5';
        ctx.stroke();
        ctx.fillStyle = 'rgba(45, 224, 165, 0.3)';
        ctx.fill();
        ctx.closePath()