Cavnas - Overlapping Radial Gradient Clears

问题

This is a follow up from Canvas - Clear Circular Gradient.

Following Hardmath's advice, I was able to clear a radial gradient area in my canvas. However, a new problem has arisen: I can't clear multiple radial gradients next to each other; they end up covering up the previous one. The area what was cleared with the previous one gets covered up the with gradient fade of the current one. See the Fiddle below for an example.

---

Fiddle

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

---

Code

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

---

Q: How do I perform multiple radial gradient clears such that they don't cover up each other when they overlap?

---

回答1:

I also had a similar situation where i have to show multiple radial gradiants that overlap each other but my last gradiant covers the pervious one.

I have found another thread related to it here createRadialGradient and transparency

Not sure if this can help you buy it certaily gave me an idea to try a solution.

来源：https://stackoverflow.com/questions/20320784/cavnas-overlapping-radial-gradient-clears