createRadialGradient和透明度

我對HTML5畫布玩弄createRadialGradient()。除了當我試圖實現（半）透明度時，它的作用就像一種魅力。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的畫布透明的徑向漸變？

來源

2011-04-02 pimvdb

我不知道這樣做的「正確的方法」，但這個工程：http://jsfiddle.net/thirtydot/BD3xA/ - 但有一個肯定更好的方式。 – thirtydot 2011-04-02 21:14:02

@thirtydot：謝謝 - 這工作得很好。你應該發佈這個答案。 – pimvdb 2011-04-02 21:16:40

好吧，既然你問：

我不很瞭解使用<canvas>用JavaScript，但我確實瞭解CSS3漸變，並且通常用透明的工作方式是使用rgba顏色。

要使漸變「淡出」爲透明，可以添加相同顏色的透明版本。

這就是我在這裏：http://jsfiddle.net/thirtydot/BD3xA/

來源

2011-04-02 21:44:35 thirtydot

也非常適合線性漸變！ – brasskazoo 2012-09-27 03:15:58

createRadialGradient和透明度

回答

相關問題