Javascript 画布中的径向渐变不'；不要适当地褪色

我正试图用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);

这是一张照片：

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

如何使其正常反应？

原因 定义的渐变为红黑，颜色和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（3003003003000）；
渐变1.addColorStop（0，“rgba（255,0,0,0）”）；
渐变1.添加颜色停止（1，#FF0000）；
ctx.fillStyle=gradient1；
ctx.fillRect（0,060600）；
ctx.fillRect（0,060600）