createRadialGradient 和透明度

我正在玩createRadialGradient()在 HTML5 画布上。它就像一个魅力，除非我试图实现（半）透明。

我制作了这个 jsFiddle 是为了让事情变得更清晰：http://jsfiddle.net/rfLf6/1/ http://jsfiddle.net/rfLf6/1/.

function circle(x, y, r, c) {
    ctx.beginPath();
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
    rad.addColorStop(0, c);
    rad.addColorStop(1, 'transparent');
    ctx.fillStyle = rad;
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.fill();
}

ctx.fillRect(0, 0, 256, 256);

circle(128, 128, 200, 'red');
circle(64, 64, 30,    'green');

正在发生的事情是画一个圆圈（径向渐变）(x, y)有半径r色标是r and 'transparent'。然而，绿色圆圈正在从绿色变为black，同时它应该变为透明，即背景圈的适当红色。

如何在 HTML5 画布上实现透明径向渐变？

好吧，既然你问了：

我不太了解使用<canvas>使用 JavaScript，但我确实了解 CSS3 渐变，处理透明度的常用方法是使用rgba颜色。

要使渐变“淡出”为透明，您可以添加相同颜色的透明版本。

这就是我在这里所做的：http://jsfiddle.net/thirtydot/BD3xA/ http://jsfiddle.net/thirtydot/BD3xA/