2012-03-06 17 views
4

私は配置可能なアニメーショングラフィックスを<canvas>要素にレンダリングするための小さなフレームワークを設定しました。これは主に私の理解を助けるためです。透明なPNGをFirefoxのキャンバスに描画するにはどうすればよいですか?

テスト用にインターネットからランダムなスプライトシートをダウンロードしました。これは、iPhoneとSafariでChromeでうまく表示される透明な背景を持っています。

このデモされていますFirefoxのでhttp://martywallace.com/simplecanvas/

白などスプライト負荷のしかし透明セクション、このように見える終わる:

enter image description here

は、Firefox固有の方法があります透明性を有効にするか、サポートされていませんか?ここで

+0

これは前に質問されています http://stackoverflow.com/questions/2916938/how-to-draw-transparent-image-with-html5-canvas-element –

+1

@MartinBarkerその質問は異なります。キャンバスに描画される画像全体に透明性を適用する方法を尋ねます。私は、デフォルトでイメージの一部である透明度が白としてレンダリングされないようにする - ブラウザ固有の問題です。 – Marty

+1

空のキャンバスに透明なPNGを描画すると、誰でもそれを見ることができますか? mVChr

答えて

1

[stupidity disclaimer]を何が起こったかです:

  1. 私はもともと透明画像をダウンロードしたとChrome、SafariやiPhoneでそれをテストしました。
  2. イメージは1MBなので、PNG8に縮小しました(エクスポート時に透明性を忘れる)。
  3. キャッシュされたイメージのバージョンは、私がテストしていたブラウザで使用されていました(これは気付きませんでした)。
  4. 私はFirefox上に移動したときに、以前のキャッシングがないため、新しい非透過が使用されていました。

結果:Firefoxは透明なPNGをうまくレンダリングします。この質問は "ローカライズされています"と閉じられています。

+0

1Mの写真ですか? –

+0

@EricYin上記の画像は、キャンバス自体のスクリーンショットで、1MBの画像の一部を別の場所に複数回レンダリングしたものです。実際のスプライトシート自体は1MBに近いものでした。 – Marty

関連する問題