6

PNG 画像を HTML キャンバスに描画しています。キャンバスにブリットされる前に、画像データに対して畳み込みフィルターを実行できるフィルター システムを実装しました。

畳み込みカーネル/マトリックスのいずれかを使用してグロー効果を作成する方法を知っている人はいますか (用語が何であるかはわかりませんが、これらについて話している: http://www.html5rocks.com/en/tutorials/ canvas/imagefilters/ ) または globalCompositeOperation ( https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html )を使用するなどの他の手段で?

不透明度が低く、拡大縮小された画像から始めて、画像を少し縮小しながら不透明度を上げることができることは承知しています。これは一種のグロー効果を作成するために機能しますが、画像の端の周りだけです.

理想的な世界では、セカンダリ グロー テクスチャを使用してグローを持つイメージの領域を指定できるとよいでしょう。いずれかのシナリオに関するアイデアはありますか? :)

4

1 に答える 1

23

以下があなたがやろうとしていたことの線に沿っていることを願っています、私はそれがかなりうまくいったと思います. そこで、記事のフィルター ライブラリ コードを使用して、ライブラリ用の新しいグロー フィルターを作成しました。これは、動作中のグロー効果を示すライブデモです。

これは、ライブラリに追加する必要があるフィルター コードです。

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 つの画像を提供する必要があります。1 つ目はグローを表示するイメージで、2 つ目はイメージに適用される実際のグロー マスクです。次に、実行するブラー パスの数を指定して、グローをより際立たせ、実行するグ​​ロー パスの数を指定して、イメージにグローを追加します。lighterアルファブレンドしたキャンバスにはグローバルコンポジションを使用しています。

この記事は、グロー効果の作成に関する非常に優れたリソースであり、私の結果を彼らの結果と比較してテストするためにグラフィックを入手した場所でもあります.

于 2012-11-16T20:16:32.987 に答える