もりた 
最近createjsっていうライブラリにはまってます。
これが楽しくて仕方ない今日このごろです。
これは何かというと、ブラウザで簡単にアニメーションを魅せることができるんです。
せっかく触れてるんだから、自分の覚書を兼ねて基本的な事を書きとどめておこうと思った次第です。
ちなみに、このWebサイトのトップページにもこのライブラリを使って描画されてるものがあったりします。
夜19時以降にアクセスして頂き、TOPのふすまが空いた後、空が夜になっているんですが、そこで星が輝いてるんです。
その星の輝きをこのライブラリでやっています。
アクセスする度に星の散らばり方が変わります。
それぞれの星の輝く速度は毎回違います。
この星の1つにフォーカスを当てて、今回は書いてみようと思います。
基本の基本で、ランダムにどうこうするとかもとりあえず置いといて、まずは・・・
「星を描いて回す」
これだけしてみようと思います。
実際に動いてるサンプルはさんぷる1こちら。
※canvas非対応ブラウザでは見れません。
※モバイルでもいまいちだと思います。
※あくまで、「星」です。何かのマークとかじゃ、ありません。
以下はやり方 。
まずは、ライブラリを読みこんでみる。
<script src="//code.createjs.com/easeljs-0.6.0.min.js" type="text/javascript"></script>
<script src="//code.createjs.com/tweenjs-0.4.0.min.js" type="text/javascript"></script>
そしたら、細かく書くよりソースを乗っけたほうが話が早いと思うので、とりあえずjsを。
// canvas非対応ブラウザの場合は以降は処理しない
try {
document.createElement("canvas").getContext("2d");
} catch (e) {
return;
}
// canvasをゲット
var canvas = document.getElementById("canvas-sky");
// ステージを作る
var stage = new createjs.Stage(canvas);
// 描画設定
createjs.Ticker.setFPS(60);
createjs.Ticker.addListener(stage);
// 何角形の星か
var sd = 8;
// 鋭さ
var ps = 0.8;
// 半径
var r = 200;
// ベース色
var color_r = 240;
// 傾き
var rotate_r = 100;
// 位置座標
var point = new createjs.Point(window.outerWidth / 2 == 0 ? 300 : window.outerWidth / 2, window.outerHeight / 2 == 0 ? 300 : window.outerHeight / 2);
// 色
var color = createjs.Graphics.getRGB(235, 215, 255);
// シェイプ
var s = new createjs.Shape();
// グラフィックス
var g = s.graphics;
// グラフィックスオブジェクトに対して
// 色を塗って星を描画
g.beginFill(color).drawPolyStar(0, 0, r, sd, ps, rotate_r).endFill();
// 位置を決める
s.x = point.x;
s.y = point.y;
// ほんのり影をつけてみたり
s.shadow = new createjs.Shadow(color, 0, 0, 80);
// ステージに追加
stage.addChild(s);
// アニメーション
// 無限ループで1.5秒の間に一回転(360度)させる。
// sineOutエフェクトによって、緩急をつけてみたり。
createjs.Tween.get(s, { loop: true }).to({ rotation: 360 }, 1500, createjs.Ease.sineOut);
中のコメントに殆ど意味が書いてあるので特に説明することは無いですけど、要はこんな簡単にできちゃうってことです。
canvasはいろんなこと出来て楽しいです。
あっ、全体のソースは、さんぷる1サンプルページに飛んでいってもらって右クリックでページのソースを見てもらうのが何よりも早いです。
次はもうちょこっとだけ凝って見て、さらにそれぞれのライブラリで用意されてるメソッドを細かく追っていきたいと思います。(予定)
2013/06/18追記
サンプル、githubにあげてます。
以上です。
