我可以用透明渐变javascript画布填充矩形吗？

Question

我正在尝试覆盖这个黑色矩形：

通过填充另一个相同大小的矩形，它上面有一个半透明的渐变颜料（应该看起来像这样）：

我知道我可以使用以下内容进行透明涂料：

g2d.fillStyle = "rgba(100, 3, 3, 0.5)";

我也知道如何做渐变绘画：

var grd=g2d.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
g2d.fillStyle=grd;

但是，我不知道如何将渐变和透明度属性组合在一起作为我的矩形上使用的一个颜色。我怎么能这样做？

Answer 1

有两种方法：

全球alpha

在绘制内容之前设置全局（将其视为“主alpha”）：

ctx.globalAlpha = 0.5;  // [0, 1]
ctx.fillRect( ... );

颜色alpha

或者用alphas定义颜色本身：

grd.addColorStop(0, "rgba(255,0,0, 0.5)");  // 50% alpha
grd.addColorStop(1, "rgba(0,0,255, 0.5)");

值得注意：如果你使用后一种方法，例如在一端设置0％不透明度，颜色仍然很重要，因为它被内插到它变得完全透明的点。同时颜色定义会流失。即不要只设置黑色（除非你需要黑色）。

Answer 2

首先绘制渐变：

var grd=g2d.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
g2d.fillStyle=grd;

然后绘制半透明背景：

g2d.fillStyle = "rgba(200,0,0,0.5)";
g2d.fillRect(x,y,w,h);