Cavnas - 重叠径向梯度清除 [英] Cavnas - Overlapping Radial Gradient Clears

问题描述

这是画布 - 透明圆形渐变的后续内容。

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

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.

小提琴

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

---

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

推荐答案

我也有类似的情况，我必须显示多个相互重叠的径向渐变，但我的最后一个渐变覆盖了透视渐变。

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.

我在这里找到了另一个与之相关的线程 createRadialGradient and透明度

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

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

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

这篇关于Cavnas - 重叠径向梯度清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！