Javascript HTML5画布上的图像渐变 我想得到一个图像上的径向梯度效应（ Alpha＝1＜/COD>中间的和透明的边）。< /P>

你对我如何做到这一点有什么想法吗？

如果我没有误解的话，你想做的是：

画图像

在其上绘制一个径向渐变，其中边界是透明的，中间是不透明的，并使用上下文上的

globalCompositeOperation

设置将透明度渐变与图像混合

您可以很容易地将其转换为代码：

---

看看这篇文章也许会对你有所帮助：我可以在圆上做径向渐变，但我需要在图像上做。这不是我想要的解决方案。我想将图像添加到另一个图像上，使其平滑混合。如果我将渐变从白色转换为白色不透明，图像将有渐变，但边缘将不透明，它将是白色的。@Gabitsh使用

ctx.globalCompositeOperation

设置可能会解决这个问题。这就是我要找的！谢谢你，阿尔尼塔克！非常好，谢谢你！这应该是这篇文章和其他文章的正确答案。我喜欢，谢谢@Alnitak我投了赞成票，并评论了公认的答案，即人们应该看看你的答案，因为它更快、更简单。再次感谢！

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
};