帆布 - 重叠径向渐变清除

Question

这是Canvas - Clear Circular Gradient 的后续报道。

按照 Hardmath 的建议，我能够清除画布中的径向渐变区域。但是，出现了一个新问题：我无法清除相邻的多个径向渐变；他们最终掩盖了前一个。前一个区域清除的区域被当前区域的渐变淡化覆盖。有关示例，请参见下面的 Fiddle。

---

小提琴

http://jsfiddle.net/Dragonseer/gXTnM/

---

代码

for(var i = 0; i < someSize; i++)
{
    var x = i;
    var y = 0;
    var r1 = 2;
    var r2 = 3;

    var radGrd = context.createRadialGradient(x, y, r1, x, y, r2);
    radGrd.addColorStop(0, "rgba( 0, 0, 0,  0 )");
    radGrd.addColorStop(1, "rgba( 0, 0, 0,  1 )");

    context.fillStyle = radGrd;
    context.clearRect(x - r2, y - r2, r2 * 2, r2 * 2);
    context.fillRect(x - r2, y - r2, r2 * 2, r2 * 2);
}

---

问：如何执行多个径向渐变清除，以使它们在重叠时不会相互覆盖？

---

Answer 1

我也遇到过类似的情况，我必须显示多个相互重叠的径向渐变，但我的最后一个渐变覆盖了前面的渐变。

我在这里找到了另一个相关的帖子createRadialGradient and transparency

不确定这是否可以帮助您购买它确实给了我尝试解决方案的想法。