HTML5 画布上的图像渐变-前端问题

Image gradient on HTML5 canvas(HTML5 画布上的图像渐变)

本文介绍了HTML5 画布上的图像渐变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在图像上获得径向渐变效果(alpha = 1 在中间，在边缘透明).

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

你有什么想法吗?

推荐答案

如果我没记错你想做的是:

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

绘制图像
在其上绘制径向渐变，其中边框透明，中间不透明，并使用上下文中的 globalCompositeOperation 设置将透明渐变与图像混合.

Draw the image
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.

您可以很容易地将其转换为代码:http://jsfiddle.net/W8Ywp/1/.

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

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

var img = new Image();

img.src = "aHR0cDovL3d3dy5uZXRzdGF0ZS5jb20vc3RhdGVzLw=="
        + '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
};

这篇关于HTML5 画布上的图像渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！