createRadialGradient和透明度

我在 HTML5画布上玩createradialGradient().它的作用就像一个魅力,除非我试图实现(半)透明度.

我让这个jsfiddle让希望更清楚：http://jsfiddle.net/rfLf6/1/.

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

ctx.fillRect(0,256,256);

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

发生的是圆(径向渐变)在(x,y)处绘制,半径为r,颜色停止为r和’透明’.然而,绿色圆圈从绿色变为黑色,而它应该变为透明,即背景圆的适当红色.

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

解决方法

好吧,既然你问：

我不太了解使用< canvas>使用JavaScript,但我知道CSS3渐变,而使用透明度的常用方法是使用rgba颜色.

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

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