HTML5 Canvasでオリンピックマークの花火
最近はテレビやニュースでもロンドンオリンピックの話題一色ですね。
私はサッカーやテニスなど球技全般が特に好きで応援していますが、深夜に試合が行われる場合に翌日の体調を考えて寝るべきか、リアルタイムで観戦するか頭を悩ませています。
さて、そんな毎日熱いオリンピックですが、以前投稿したHTML5 Canvasで表現する打ち上げ花火やHTML5 Canvasパフォーマンスチューニングの派生系として、
Canvasでオリンピック(五輪)マークにはじける花火を作成しました。
オリンピックマーク単体では寂しいので、以前作成した花火のバリエーションと組み合わせて当社オフィシャルサイトにて公開しています。
※当社オフィシャルサイトでの花火はオリンピック期間中の限定公開となります。
※オリンピック閉会後は下記jsdo.itにてご覧ください。
デモ
- 対応ブラウザ
-
- IE9+
- Chrome(最新版を推奨)
- Firefox(最新版を推奨)
- Safari(最新版を推奨)
課題
閲覧環境(ブラウザ、ハードウェアetc)でパフォーマンスに差が出るため、
花火(はじけるエフェクト)の見え方に違いが出てしまいます。
今後
上記課題は時間の経過と共に解決される課題ではありますが、JS側の工夫で閲覧環境による差異を少なくできるよう模索します。