3

http://jsfiddle.net/jBgqW/

背景をペイントしてfillRectにfillStyle設定しましrgb(255,0,0)たが、ピクセルを反復処理してランダムな色とアルファピクセルの値を設定すると、0すべてが白になります。ピクセルが透明な場合、以前にペイントされた背景色とブレンドするか、常にデフォルトで白にする必要があると想定しました。

キャンバスの使い方が間違っていることを願っています。

この場合、背景が赤ではない理由と、アルファピクセルを適切に使用する方法を誰かが説明できますか? これがアルファ事前乗算と関係があるかどうかを知りたいです。

4

2 に答える 2

3

を使用する場合globalAlpha、ピクセルの色は現在のrgba値と新しい値を使用して計算されます。

ただし、この場合、値を手動で設定しているため、計算は行われません。自分でrgba値を設定しているだけです。つまり、アルファチャネルは計算には使用されませんが、それ以上使用せずに変更されるだけです。以前の色（赤）は基本的に「ブルートフォース」の方法で上書きされます-の代わりにrgba(255, 0, 0, 255)、現在はちょうどrgba(128, 53, 82, 0)です。元の赤い色は単に捨てられました。

結果として、のアルファは0完全な透明度を表すため、親要素の色が表示されます。

これは、ボディの背景色を変更した場合に確認できます：http: //jsfiddle.net/jBgqW/2/。

于 2011-06-07T20:54:41.757 に答える
0

これはややスレッドのネクロマンシーですが、私はこの問題に直面したばかりで、元のポスターではなくても、Google から来た私のような人々のための解決策があります。

前述のように、putImageData はアルファ ブレンドではなくピクセルを直接置き換えますが、これはアルファ データを保持することも意味します。次に、drawImage を使用してアルファ ブレンディングでその画像を再描画できます。

例として、200 x 100 ピクセルのキャンバスと 100 x 100 の imageData オブジェクトがあるとします。

// our canvas

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

// our imageData, created in whatever fashion, with alpha as appropriate...
var data = /* ... */

// lets make the right half of our canvas blue
ctx.fillStyle="blue";
ctx.rect(100, 0, 100, 100);
ctx.fill();

// now draw our image data to the left (white) half, pixels are replaced
ctx.putImageData(data, 0, 0, 100, 100);

// now the magic, draw the canvas to itself with clipping
ctx.drawImage(canvas, 100, 0, 100, 100, 100, 0, 100, 100);

出来上がり。画像の右半分は、青色の背景とブレンドされた画像データであり、ハードウェア アシストでレンダリングされています。

于 2014-01-29T02:35:13.317 に答える