javascript - 两种径向渐变颜色，连接时组合

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，可能使用“逐像素”渲染方法。

另一种方法是将两个形状渲染成两个图像，然后使用图像处理将它们按照一定的规则组合起来。 Google html5 Canvas 图像处理。