Canvas Cavnas-重叠径向渐变清除

这是我们的后续报道

按照Hardmath的建议，我能够清除画布上的径向渐变区域。然而，出现了一个新问题：我无法清除相邻的多个径向渐变；他们最终掩盖了前一个。上一次清除的区域会被当前区域的渐变淡入所覆盖。请参见下面的小提琴以获取示例

---

小提琴

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

---

代码

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

for（变量i=0；i

---

Q：如何执行多个径向渐变清除，以便它们重叠时不会相互遮挡？

---

---

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

我在这里找到了另一条与之相关的线索

我不确定这是否能帮你买它，这确实给了我一个尝试解决方案的想法