7

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キャンバスに透明な放射状グラデーションを実装するにはどうすればよいですか？

4

1 に答える 1

13

さて、あなたが尋ねたので：

JavaScriptでの使用についてはよくわかりませんが<canvas>、CSS3グラデーションについては知っています。透明度を操作する通常の方法は、rgba色を使用することです。

グラデーションを透明に「フェードアウト」させるために、同じ色の透明バージョンを追加できます。

それが私がここでしたことです：http：//jsfiddle.net/thirtydot/BD3xA/

于 2011-04-02T21:44:35.457 に答える