CreateJSを用いてcanvasに複数の画像を読み込んで表示する方法です。
※こちらの応用編
javascript
window.onload = function(){
var stage = new createjs.Stage('canvas');
// キューオブジェクトを生成
var queue = new createjs.LoadQueue();
// 各ファイル読み込み完了時
queue.addEventListener('fileload', function(e){
// 画像の場合
if(e.item.type === createjs.LoadQueue.IMAGE){
var bitmap = new createjs.Bitmap(e.result);
stage.addChild(bitmap);
}
});
// 全ファイル読み込み完了時
queue.addEventListener('complete', function(e){
alert('全ファイル読み込み完了');
});
// 読み込み実行
queue.loadManifest([
{id:'image_1', src:'images/image_1.png'},
{id:'image_2', src:'images/image_2.png'},
{id:'image_3', src:'images/image_3.png'},
{id:'image_4', src:'images/image_4.png'},
{id:'image_5', src:'images/image_5.png'}
]);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', function(){
stage.update();
});
}
e.resultで、読み込んだファイルが取得出来る。
e.item.typeで、読み込んだファイルの種類が取得出来る。
e.item.idで、読み込み実行時に設定したidが取得出来る。
また、全ファイルが読み込み終わった際に
queue.getResult(設定したid);
で、読み込んだ各ファイルが取得出来る。