javascript - HTML5キャンバス上の画像グラデーション

Question

画像に放射状のグラデーション効果を取得したいと思います（alpha = 1中央で、エッジが透明です）。

どうすればそれができるかについてのアイデアはありますか？

Answer 1

私があなたがしたいことを間違えていなければ、次のようになります。

1. 画像を描く
2. その上に放射状のグラデーションを描画します。境界線は透明で中央は不透明globalCompositeOperationで、コンテキストの設定を使用して透明度のグラデーションを画像とブレンドします。

これをコードに簡単に変換できます：http：//jsfiddle.net/W8Ywp/1/。

var ctx = $('#cv').get(0).getContext('2d');

var img = new Image();

img.src = 'http://www.netstate.com/states/'
        + 'symb/flowers/images/oklahoma_rose.jpg';

img.onload = function() {
    ctx.drawImage(img, 0, 0, 300, 300); // Draw image

    // Create gradient, from middle to borders
    var gradient = ctx.createRadialGradient(150, 150, 0,
                                            150, 150, 150);

    // Opaque white in the middle
    gradient.addColorStop(0, 'rgba(255,255,255,0)');

    // Transparent white at the borders
    gradient.addColorStop(1, 'rgba(255,255,255,1)');

    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 300, 300); // Fill rectangle over image with the gradient
};