2

3x3の画像があります。CanvasPixelArray は次のとおりです。

[12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255]

すべてのピクセルのアルファを 0 に変更し、次のように戻します。

bobs = this.gfx.getImageData(0,0,3,3).data
for (a=3;a<bobs.data.length;a+=4)
bobs.data[a] = 0
this.gfx.putImageData(bobs,0,0)
bobs = this.gfx.getImageData(0,0,3,3).data
for (a=3;a<bobs.data.length;a+=4)
bobs.data[a] = 255
this.gfx.putImageData(bobs,0,0)

すべてのピクセルが黒くなりました。ブラウザは、メモリを節約するために色を黒に変更しました。これを防ぐ方法はありますか、または重複を保存する必要がありますか?

4

1 に答える 1

2

この理由は、Canvas が事前に乗算されたアルファを使用しているためだと思います。つまり、すべての RGB 値がそれらのピクセルのアルファ値で乗算されます。背景などとのアルファブレンディングを高速化するために行われます。

この記事には、事前に乗算されたアルファに関するセクションがあります: wikipedia:Alpha_compositing

おそらく、変更されていない値のコピーを保持するか、画像のアルファ値を保存して、画像を描画する前に globalAlpha プロパティを設定する必要があります。(私が画像と言うとき、3x3 キャンバスを同様に作成し、そこにピクセルを格納し、drawImage() を使用してメイン キャンバスに描画することができます)。

于 2011-08-25T14:39:00.613 に答える