HTML Canvas的辉光效果,可能使用Convolute Kernel/Matrix

Question

我正在将一个PNG图像绘制到HTML画布上,并且我已经实现了一个过滤系统,以允许在图像数据被布局到画布之前对图像数据执行回旋过滤器.

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

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

在理想的世界中,能够使用次级辉光纹理指定具有发光效果的图像区域将是非常棒的.任何一种情况下的想法？:)

Answer 1

希望以下是您想要做的事情,我认为结果非常好.所以我使用了文章中的过滤器库代码,并为库创建了一个新的辉光过滤器,因为他的代码完成得非常好.这是一个现场演示,展示了实际的发光效果.

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

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张图片.第一个是您希望发光的图像,第二个是应用于图像的实际发光蒙版.然后,您可以指定要执行的模糊传递次数,这使得光晕更加突出,以及执行多少个光晕传递,从而为图像添加光晕.我使用lighteralpha混合它的画布的全局合成.

这篇文章是关于创建发光效果的非常好的资源,它也是我获取图形的地方,以便测试我的结果.