createRadialGradient和透明度

Question

我正在使用HTML5画布上的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画布上实现透明径向渐变？

- pimvdb

---

我不确定“正确的方法”是什么，但这个方法可行：http://jsfiddle.net/thirtydot/BD3xA/ - 不过肯定有更好的方法。 - thirtydot

@thirtydot：谢谢 - 这很好用。你应该把这个作为一个答案发布出来。 - pimvdb

Answer 1

好的，既然你问了：

我不太了解如何使用JavaScript和 <canvas> ，但我知道一些关于CSS3渐变的东西，而在处理透明度时通常使用 rgba 颜色。

要使渐变“消失”到透明，可以添加一个相同颜色的透明版本。

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

- thirtydot

---

也非常适用于线性渐变！ - brasskazoo