キャンバスのPNG透明度

Question

キャンバスはPNGアルファをサポートしていますか？キャンバスに追加したいくつかのPNGにいくつかの問題があります。画像のエッジは黒く、アルファチャネルが存在しないか、認識されているかのようにギザギザが付けられています。

Answer 1

キャンバスにアルファを備えた24ビットPNGを入れた場合、それは理解しています。

https://developer.mozilla.org/en-us/docs/web/guide/html/canvas_tutorial/using_images

たぶんあなたのPNGはきれいではないかもしれません、つまり、国境には透明ではない領域がありますか？

Answer 2

使用する clearRect（） また fillrect（） PNG画像を再描画する前に、RequestAnimationFrameまたはSetIntervalループでそれを行っている場合。

同様の問題があったので、私はこの質問に出くわしましたが、私の画像はすでに24ビットでした。 PNGイメージをキャンバスに再描画し、（ご存知のように）オーバーラップすると、Alpha "Fade-Out"透明性がある「燃えた」エッジが発生しました。

DrawImageを呼び出す前にエリアをクリーニングするだけで、その画像がそれ自体にレンダリングされるのを防ぐことができます。