如何设置fillRect的透明度

地图是背景，旁边的两块绿色的是我用fillRect画的
想让那两块绿色的变得透明一点有什么办法吗？

要设置fillRect的透明度，你需要首先设置画布的全局透明度。这可以通过调用context.globalAlpha属性来完成。然后，调用fillRect方法绘制矩形。

例如，假设你想在画布上绘制一个半透明的红色矩形，你可以这样做：

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

// 设置画布的全局透明度为 0.5
context.globalAlpha = 0.5;

// 绘制一个红色矩形
context.fillStyle = 'red';
context.fillRect(10, 10, 100, 100);

请注意，globalAlpha属性是一个全局属性，它会影响所有后续的绘制操作。如果你想在画布上绘制不同的透明度的图形，你可以在绘制每个图形之前重新设置globalAlpha属性。

另外，你还可以使用透明的颜色填充矩形，从而达到同样的效果。例如，下面的代码也会绘制一个半透明的红色矩形：

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

// 使用透明的红色填充矩形
context.fillStyle = 'rgba(255, 0, 0, 0.5)';
context.fillRect(10, 10, 100, 100);

在这种情况下，你可以使用rgba颜色格式指定红色和透明度，而无需设置画布的全局透明度。