两个径向渐变的颜色，结合时结合

Question

我在canvas HTML5中有两个径向渐变，当我组合两个形状时，它们的颜色结合在一起，但是，我希望颜色是分开的，就像下面的例子:

http://jsfiddle.net/Kk2tY/

我需要的颜色透明度的最小值类似于:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rgba = new Array();
rgba[0] = new Array();
rgba[0][0] = [0, 255, 163, 0, 0.09];
rgba[0][1] = [0.3, 255, 168, 0, 0.07];
rgba[0][2] = [0.6, 255, 156, 0, 0.04];
rgba[0][3] = [1, 255, 169, 0, 0];
var x = 100,
    y = 75,
    // Radii of the white glow.
    innerRadius = 5,
    outerRadius = 70,
    // Radius of the entire circle.
    radius = 60;
ctx.beginPath();
var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, "rgba(255,163,0,0.35)");
gradient.addColorStop(0.3, "rgba(255,168,0,0.24)");
gradient.addColorStop(0.6, "rgba(255,156,0,0.17)");
gradient.addColorStop(1, "rgba(255,169,0,0)");
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
ctx.beginPath();
var gradient = ctx.createRadialGradient(x + 45, y, innerRadius, x + 45, y, outerRadius);
gradient.addColorStop(0, "rgba(255,163,0,0.35)");
gradient.addColorStop(0.3, "rgba(255,168,0,0.24)");
gradient.addColorStop(0.6, "rgba(255,156,0,0.17)");
gradient.addColorStop(1, "rgba(255,169,0,0)");
ctx.arc(x + 45, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();

http://jsfiddle.net/3Atnt/

我也尝试过context.globalAlpha，但结果是相同的。

Answer 1

当你使用透明度时，那么像素的所有不同颜色将被添加到最终结果

如果这不是你想要的结果，你得自己解决。

你需要做的是(在纸上)画一个图表，选择不同的点，并手动确定它们应该具有哪种颜色。

然后查看所有的点，并尝试想出一个产生这些结果的算法。

最后，您需要将该算法转换为JavaScript，可能使用"逐像素"呈现方法。

另一种方法是将两个形状渲染成两幅图像，然后通过图像处理将它们按照一定的规则组合起来。谷歌html5 canvas image processing