キャンバス上のPNG透明度

キャンバスはPNGアルファをサポートしていますか？私はキャンバスに追加したいくつかのPNGにいくつかの問題があります。あたかもアルファチャンネルが存在しないか、認識されているかのように、画像のエッジが黒くぎざぎざです。キャンバス上のPNG透明度

出典

2011-01-13 Rigil

1ビットの透明度を持つ8ビットのPNGを保存している可能性があります。そのため、黒とブレンドされています。問題を引き起こしているファイルの1つを共有できますか？ – Phrogz

キャンバスに24ビットのPNGをアルファベットで入力すると、それを理解できます。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

たぶんあなたのPNG画像がきれいではありません、すなわち国境での非透過領域を持っていますか？

出典

2011-01-13 09:41:38 oberhamsi

忘れて、私は画像を表示するためにprocessing.jsライブラリを使用しています。私はドキュメントを見て、PNGがサポートされているとは言いませんので、運が悪いと思います。 – Rigil

@Rigilそうは思わしくない。 – Phrogz

@Phrogz私はフレームレートが高すぎると分かりました。クリックすると、毎秒30フレームのPNGが描画され、お互いが重なり合ってエッジのぎざぎざのような外観になりました。 – Rigil

requestAnimationFrameまたはsetIntervalループでPNGイメージを再描画する前に、clearRect()またはfillRect()を使用してください。

私は同様の問題があったのでこの質問に遭遇しましたが、私のイメージはすでに24ビットになっていました。 PNGイメージをキャンバスに再描画するrequestAnimationFrameループがあって、それらが重なり合って（あなたが言ったように）、この結果はこの「焼き付けられた」エッジであり、アルファの「フェードアウト」透明性を持つはずです。

drawImageを呼び出す前に領域を消去するだけで、そのイメージがその上にレンダリングされないようにすることができます。

出典

2017-07-26 14:27:38 adrield

キャンバス上のPNG透明度

答えて

関連する問題