JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

背景の設定

EaselJSでは、様々なエレメントを描画する際に、その背景を設定する事ができます。今回はその方法について説明します。

イメージを取り込む

var img = new Image();
img.src="image/sample.jpg";

まずはイメージを取り込む必要があります。注意しなければならないのは、このイメージの取り込みが完全に終わってからでないと書き込みができないという事です。ですので、以下のように画像の読み込みが完了してから描画しなければなりません。読み込みが完了した際はonloadイベントが走りますので、その中で描画します。

img.onload=function(){
    g.beginBitmapFill(img);
    g.drawCircle(0,0,100);

    g.setStrokeStyle(15);
    g.beginFill(Graphics.getHSL(0,0,0,0));
    g.beginBitmapStroke(img);
    g.drawCircle(0,0,130);

    var s = new Shape(g);
    s.x = $(window).width()/2;
    s.y = $(window).height()/2;

    stage.addChild(s);
    stage.update();
}

ここでは、beginBitmapFill()と、beginBitmapStroke()を使用して塗りと線に背景画像を指定しています。ここでは引数を１つしか指定していませんが、第二引数にはCSSでもおなじみの”repeat”,”repeat-x”,”repeat-y”,”no-repeat”を指定することができます。デフォルトでは”repeat”ですが、タイリングに制限を加えたい場合は指定するとよいでしょう。

サンプル

画像が軽量の場合、イメージのonload処理なしでコーディングしてもうまく動いてしまう場合がありますので、注意が必要です。CreateJSシリーズにはPreloadJSなるものもありますが、このへんとうまくかみ合ってくるのかなと思います。多分。