Canvasで複数の画像を描画しピクセル同士が重なったとき、alpha値が高い方を優先して描画したい

実現したいこと

jsで透明度を持った画像を大量に描画するとき、画像同士が重なることがあります。このとき、drawImageで何も設定せずに描画すると、alpha値は乗算され、重なるほどにalpha値が大きくなっていってしまいます。
このようなalpha値が累積されるような描画ではなく、alpha値の高い方のみが描画されるような描画を目指しています。
なお今回使用される画像は単色で、alpha値で濃淡が表現されています。

試したこと

getImageDataでImageDataを取得して、配列を直接書き換える方法を試しました。この方法なら一応実現できましたが、描画頻度が高く、画像サイズが大きいため、処理落ちは避けられません。他の方法がなければ、これをより効率化していく方向で実装しようと思いますが、それにも限界があると思い、できればCanvasの描画機能内で実現できることが理想だと思っています。

ご助力、よろしくお願いいたします。

コメントを投稿

0 コメント