javascript - 我可以用透明渐变 javascript Canvas 填充矩形吗？

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”):

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

颜色阿尔法

或者用 Alpha 定义颜色本身:

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

值得注意:如果您使用后一种方法，例如在一端设置 0% 不透明度，颜色仍然很重要，因为它会被插值到完全透明的程度。与此同时，颜色定义将会渗透出来。 IE。不要只设置黑色(除非您需要黑色)。