Canvasに関するa-24のブックマーク (2)

  • HTML5 Canvasを始めよう:EaselJSを使った流体パーティクル入門 | ClockMaker Blog

    HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ

    HTML5 Canvasを始めよう:EaselJSを使った流体パーティクル入門 | ClockMaker Blog
    a-24
    a-24 2012/02/06
    画像から加速度を割り出す手法、丁寧な解説で分かりやすい
  • HTML5 Canvasを始めよう:EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog

    HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと

    HTML5 Canvasを始めよう:EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
    a-24
    a-24 2012/02/03
    Flash作品をHTML5に移植、解説付き
  • 1