在同一個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，問題搞定