画布中的径向渐变不会正确褪色

Question

我正在尝试使用Javascipt / HTML画布制作径向渐变。问题是渐变不能正确重叠，好像alpha通道不起作用。

这是我正在使用的代码：

var gradient1 = ctx.createRadialGradient(300, 300, 300, 300, 300, 0);
gradient1.addColorStop(0,"rgba(0, 0, 0, 0)");
gradient1.addColorStop(1,"#FF0000");
ctx.fillStyle = gradient1;
ctx.fillRect(x1, y1, 600, 600);
ctx.fillRect(x1, y1, 600, 600);

这是一张图片：

由于某种原因，这会变成黑色而不是保持红色。当其中两种不同颜色的渐变触碰时，这会导致它表现得很奇怪。

我该如何正常反应？

Answer 1

原因

定义的渐变是红黑色，颜色和alpha通道都将被插值。在50％时，它将介于红色和黑色之间，但也可以看到50％，这就是它变成黑色的原因。

固化

要修复，请确保两个色标都与alpha通道更改的颜色相同。这将使颜色始终保持相同：

gradient1.addColorStop(0, "rgba(255, 0, 0, 0)"); // red, but transparent
gradient1.addColorStop(0, "#f00");               // red, solid

点击以下链接查看此操作：

var ctx = document.querySelector("canvas").getContext("2d");

var gradient1 = ctx.createRadialGradient(300, 300, 300, 300, 300, 0);
gradient1.addColorStop(0,"rgba(255, 0, 0, 0)");
gradient1.addColorStop(1,"#FF0000");
ctx.fillStyle = gradient1;
ctx.fillRect(0, 0, 600, 600);
ctx.fillRect(0, 0, 600, 600);

<canvas width=600 height=600></canvas>