javascript - Canvas 中的径向渐变不会正确淡化

Question

我正在尝试使用 Javascipt/HTML Canvas 制作径向渐变。问题是渐变没有正确重叠，就好像 alpha channel 不工作一样。

这是我使用的代码:

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);

这是一张图片:

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

我怎样才能让它正常 react ？

Answer 1

原因

定义的渐变是红黑色，颜色和 alpha channel 都将被插值。在 50% 时，它将介于红色和黑色之间，但也有 50% 可见，这就是它变得偏黑的原因。

治愈

要修复，请确保两个色标的颜色相同，只是 alpha channel 发生了变化。这将使颜色始终保持相同:

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>