6

RGBピクセルデータを使用して画像を描画しています。その画像の背景色を透明にする必要があります。アルファを透明な画像にするために設定できる値は何ですか？または、これに対する他の解決策はありますか？

4

3 に答える 3

10

私があなたが必要としているものを理解しているなら、あなたは基本的に画像の特定の色を透明にしたいでしょう。これを行うには、ピクセル操作の説明について、mdnをgetImageDataチェックアウトする必要があります。

ここにいくつかのサンプルコードがあります

var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight),
    pix = imgd.data;

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
        g = pix[i+1],
        b = pix[i+2];

    if(g > 150){ 
        // If the green component value is higher than 150
        // make the pixel transparent because i+3 is the alpha component
        // values 0-255 work, 255 is solid
        pix[i + 3] = 0;
    }
}

ctx.putImageData(imgd, 0, 0);​

そして、実用的なデモ

上記のコードを使用すると、を使用してfuschiaをチェックできます

if(r == 255 && g == 0 && b == 255)

于 2012-04-05T01:57:16.490 に答える
2

clearRectキャンバスメソッドが必要だと思います。

http://www.w3schools.com/html5/canvas_clearrect.asp

これにより、手間やピクセル操作なしで、ピクセルを透明（またはその他のRGBA色）にクリアできます。

于 2012-04-05T21:27:56.963 に答える
0

アルファ0は、ピクセルが完全に透明であることを示します。アルファ値255は完全に不透明であり、透明性がないことを意味します。

画像の一部が完全に透明（アルファ0）の場合、アルファ0を使用している限り、RGB値に何を使用してもかまいません。ちなみに、私が使用した古いWindowsプログラムの中には透明度の色として、左上のピクセルや右下のピクセルなどの仮定が使用されます。次に、すべてのピクセルをループし、この特定のRGB値に遭遇したときにアルファを0に設定します。

127のアルファを使用し、画像が別の画像の上に表示された場合、2つの画像が同じように表示されるか、下の画像が上の画像まで色の50％を染み込ませているように見えます。

画像全体に適用したときにどのように見えるかをテストして確認する場合は、アルファの変数を設定します。

于 2012-04-04T20:58:37.107 に答える