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](https://cdn-ak-scissors.b.st-hatena.com/image/square/31802245f909db95d5742fcef21abb9b18ad6cf4/height=288;version=1;width=512/https%3A%2F%2Fclockmaker.jp%2Fblog%2Fwp-content%2Fuploads%2F2014%2F01%2F120206_arrows.png)