画布 - 重叠径向渐变清除

Question

这是Canvas - Clear Circular Gradient的后续行动。

根据Hardmath的建议，我能够在画布中清除径向渐变区域。但是，出现了一个新问题：我无法清除彼此相邻的多个径向渐变;他们最终掩盖了前一个。用前一个区域清除的区域被当前区域的渐变淡化覆盖。有关示例，请参阅下面的小提琴。

---

小提琴

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

找到了与之相关的另一个帖子

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