Question

我在画布HTML5中有两个径向渐变，当我组合这两个形状时，它们的颜色组合在一起，但是，我希望颜色是分开的，如下例所示：

我至少需要与此类似的颜色透明度：

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，可能使用＆＃34;逐像素＆＃34;渲染方法。

另一种方法是将两个形状渲染成两个图像，然后根据某些规则使用图像处理来组合它们。 Google为html5 canvas image processing。

两种径向渐变颜色，加入时组合

1 个答案: