Градиент изображения на холсте 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
};