在同一个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()

ok，问题搞定