2016.12.22
2017.4.17

画像を表示する方法

CreateJSを利用してCanvas上に画像を表示する場合、直接画像を指定する方法と事前に画像を読み込んでから処理を実行する方法があります。

事前に画像を読み込んでいない場合、一番最初の処理で画像が表示されないことがあるので、できれば事前に読み込んでおいた方がよさそうです。

読み込みにはCreateJSのライブラリの一つであるPreloadJSの機能を利用します。

コード


// canvasタグのID「myCanvas」
var stage = new createjs.Stage("myCanvas");
var loader=new createjs.ImageLoader("hoge.png", false);
loader.addEventListener("complete",function() {
    var image = new createjs.Bitmap("hoge.png");
    image.x = 0;
    image.y = 0;
    stage.addChild(image);
    stage.update();
});
loader.load();

上記のコードでは「hoge.png」という画像を読み込んだ後、キャンバスに出力するための画像オブジェクトを作成しています。

こちらの記事(CreateJSを利用してクリスマス仕様のヘッダー作成|onerun)でヘッダーを作成した際、ImageLoaderを利用しないと初めてアクセスする画像がキャンバスに表示されませんでした。

参考リンク

CreateJS】関連記事