transparency - createRadialGradient和透明度

Question

我在HTML5 Canvas 上玩createRadialGradient()。除非我要实现(半)透明性，否则它的工作原理就像一种魅力。

我做了这个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 Canvas 上实现透明的径向渐变？

Answer 1

好吧，既然您问过:

我对将<canvas>与JavaScript结合使用了解不多，但是我对CSS3渐变也很了解，而与透明度配合使用的通常方法是使用rgba颜色。

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

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