createRadialGradient和透明度

Question

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

我做了这个jsFiddle,希望更清楚: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和'transparent'.然而,绿色圆圈从绿色变为黑色,而它应该变为透明,即背景圆圈的适当红色.

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

Answer 1

好吧,既然你问:

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

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

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