はてなブックマーク

まずは概要から さて、前回のチュートリアルでEaselJSを動かす環境は出来ました。 EaselJSで開発する環境を整える 次は描画の基本となる材料を揃えて実際に絵を描いてみましょう。EaselJSでお絵かきを行うには少なくとも一つのcanvasタグが必要です。そして、その上にレイヤー状のオブジェクトを重ねていくことで描画を行っていきます。図にすると以下のようなイメージです。 ここに書かれているStageオブジェクトとelementがEaselJSの担当範囲。 とはいえものは試しです。実際に組んでみましょう。 HTML部分 <div id="wrapper"> <canvas></canvas> </div>​ できました。簡単すぎますね。ここにEaselJSは様々なモノを描いていくわけです。次にCSSでスタイルを整えます。 CSSでcanvasをWindow全体に広げる ここでは画面全体

EaselJSとは？ EaselJSは、flashのようにオブジェクト描画を行えるjavascriptフレームワークという事で話題になりました。EaselJSはリッチなWEBサイトを構築する為のjsスイート、CreateJsの一部として提供されています。 CreateJS | A suite of Javascript libraries and tools designed for working with HTML5 まずは環境作成 本サイトでは、jsfiddleによる環境作成を推奨しています。これがあると色々と捗るのです。こちらを参考にしてみてください。 jsfiddleでjavascript開発環境を作ろう！ 登録が終わったら、以下のサイトにアクセスしてください。 http://jsfiddle.net/nekosmash/sAPdE/ このような画面になると思います。ここで、メニ