HTML Canvas 上的发光效果，可能使用卷积核/矩阵

我正在将 PNG 图像绘制到 HTML 画布上，并且实现了一个过滤器系统，以允许在将图像数据传输到画布之前对图像数据执行卷积过滤器。

有谁知道如何使用卷积核/矩阵创建发光效果（我不确定术语是什么，但我正在谈论这些：http://www.html5rocks.com/en/tutorials/canvas/imagefilters/ http://www.html5rocks.com/en/tutorials/canvas/imagefilters/) 或通过其他方式，例如使用 globalCompositeOperation (https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html)?

我知道您可以从低不透明度和缩放图像开始，然后增加不透明度，同时稍微缩小图像。这可以创建一种发光效果，但仅限于图像边缘。

在理想的世界中，如果能够使用辅助发光纹理指定具有发光的图像区域，那就太好了。对这两种情况有什么想法吗？ :)

希望以下内容符合您想要做的事情，我认为结果很好。所以我使用了过滤器库代码文章 http://www.html5rocks.com/en/tutorials/canvas/imagefilters/，并且刚刚为库创建了一个新的发光滤镜，因为他的代码一开始就做得很好。这里有一个现场演示 http://somethinghitme.com/projects/glow/显示活动中的发光效果。

这是您需要添加到库中的过滤器代码

Filters.glow = function(pixels, passes, image, glowPasses){
        for(var i=0; i < passes; i++){  
            pixels = Filters.convolute(pixels, 
                [1/9,  1/9,  1/9,
                1/9,  1/9,  1/9,
                1/9,  1/9,  1/9 ]);
        }
        
        var tempCanvas = document.createElement("canvas"),
            glowCanvas = document.createElement("canvas"),
            tCtx = tempCanvas.getContext("2d"),
            gCtx = glowCanvas.getContext("2d");
        
        tempCanvas.width = glowCanvas.width = pixels.width;
        tempCanvas.height = tempCanvas.height = pixels.height;
        
        tCtx.putImageData(pixels, 0, 0);
        gCtx.drawImage(image, 0, 0);

        gCtx.globalCompositeOperation = "lighter";

        for(i = 0; i < glowPasses; i++){
            gCtx.drawImage(tempCanvas,0,0);
        }
        
        return Filters.getPixels(glowCanvas);
    }

这就是您使用上述过滤器的方式。

var glowImage = document.images[1],
    glowMask = document.images[0],
    c = document.getElementById("canvas"),
    ctx = c.getContext("2d");

window.onload = function() {
    var pData = Filters.filterImage(Filters.glow, glowImage, 5, glowMask, 2);
    c.width = pData.width;
    c.height = pData.height;
    ctx.putImageData(pData, 0, 0);
}

您需要为其提供 2 张图像。第一个是您希望出现辉光的图像，第二个是应用于图像的实际辉光蒙版。然后，您可以指定要执行多少个模糊通道，这会使发光更加突出，以及要执行多少个发光通道，这会将发光添加到图像中。我用lighter阿尔法混合画布的全局合成。

本文 https://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch21.html是创建发光效果的非常好的资源，也是我获得图形的地方，以便根据他们的结果测试我的结果。