最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Image gradient on HTML5 canvas - Stack Overflow

programmeradmin0浏览0评论

I would like to obtain a radial gradient effect on an image (alpha = 1 in the middle and transparent on the edges).

Do you have any ideeas on how I could do that?

I would like to obtain a radial gradient effect on an image (alpha = 1 in the middle and transparent on the edges).

Do you have any ideeas on how I could do that?

Share Improve this question edited Sep 30, 2011 at 11:12 pimvdb 155k80 gold badges311 silver badges356 bronze badges asked Jun 21, 2011 at 11:57 gabitzishgabitzish 9,6917 gold badges46 silver badges67 bronze badges 2
  • take a look at this post maybe it will help you: stackoverflow./questions/5525874/… – Tim Commented Jun 21, 2011 at 11:59
  • I can make radial gradients on circles, but I need it on images. – gabitzish Commented Jun 21, 2011 at 12:33
Add a ment  | 

1 Answer 1

Reset to default 7

If I'm not mistaking what you want to do is:

  1. Draw the image
  2. Draw a radial gradient over it, where the borders are transparent and the middle is opaque and using the globalCompositeOperation setting on the context to blend the transparency gradient with the image.

You can rather easily translate this into code: http://jsfiddle/W8Ywp/1/.

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

var img = new Image();

img.src = 'http://wwwstate./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
};
发布评论

评论列表(0)

  1. 暂无评论