enchant.jsでcanvasを使いゲージ的なものを表示する方法をまとめてみる

enchant.js

はい。


この前書いた記事
enchant.jsでゲージ的なものを表示するコード - アンバランスな日々に
で色々と教えてもらったりしたのでまとめます。
他人のふんどしでなんちゃら

SurfaceのcontextはHTML5のgetContext('2d')に相当します。
基本的な使い方は以下の通りです。

var s = new Sprite(64,64);
s.image = new Surface(64,64);
s.image.context.beginPath();
s.image.context.fillRect(0,0,64,64);

これでSprite上に黒い四角が描けます。
色変更や他の図形などはhtml5.jpを参照願います。

http://d.hatena.ne.jp/soramugi/20110720/1311171635#c1311571861

Surfaceクラスは全力でスルーしていたのですが（よくわからなかった）
わかりやすくコメントをしてもらったのでSurfaceを理解出来ました。


http://jsdo.it/usamyu_/xTOU
こちらは実際にゲージ的なものをcanvasで書いたもの、色も変わるようになっていて芸がこまかい...!!　canvasで表示してからwidth値変更をしてゲージのように見せてます。


http://rickytheta.blog134.fc2.com/blog-entry-316.html
こちら、canvasを動的に動かす方法。実験形式でためしているます。思考の流れも一緒に書いてあるので何故そう書くのかが分かりやすいです！



以上です。言ってしまうとゲージを表現するぐらいなら画像を使った方が簡単にできそうです。
しかし、canvasは様々な図形を表現できるのでゲージ的なものを表現するという簡単なものからcanvasに慣れて、使いこなしていくというのもアリだと思います。