タグ

canvasに関するfoooomioのブックマーク (3)

  • takram laboratory » 1時間で日本縦断してみた

    Googleマップをよく使っている方ならピンときたかもしれません。 答えはGoogleマップのストリートビューを利用可能なエリアです。 昔は主要都市だけだったエリアが、今や日全てをカバーしようとしています。 「それって、もしかしてストリートビューだけで日縦断旅行できるんじゃね?」 などと思いついてしまったらやらざるを得ないのが人情というもの。 しかしストリートビューをポチポチとクリックしながら進むのは面倒くさすぎてとてもやってられません。 そこで見つけたのがHyperlapseというツール。ブラウザ上でストリートビューをアニメーションに変換してくれるというものです。 「なんだ、これ使えば楽勝楽勝♪」と思ったのも束の間、このHyperlapseを調べてみるとどうやらあまり長いアニメーションはできないということが判明。ストリートビューで使われている大量の写真を全てメモリ上にキャッシュす

  • HTML5で複雑なアニメーションを実現する最適な方法とは? CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA

    HTML5で複雑なアニメーションを実現する最適な方法とは? CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ:GIFアニメーションを使う方法 おまけ:Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう

    HTML5で複雑なアニメーションを実現する最適な方法とは? CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
  • 要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話

    2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。(ミスなどの指摘は @lowply までお願いします) もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2

    要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
  • 1