在循環easeljs中訪問畫布

Question

我正在使用easeljs進行HTML5編程。在我的例子，我有3個畫布（CAN1，CAN2，CAN3是這三個畫布的舞臺上，並在使用循環加載在畫布圖像

如：

can1 = new Stage(canvas1); 
can2 = new Stage(canvas2); 
can3 = new Stage(canvas3); 
for(var j=0;j<=3;j++){ 
    "can"+j.addChild(//image need to display) 
} 

「可以」 + J不工作它表明j.addChild並不功能錯誤如何訪問該

感謝，
沙迪亞

Answer 1

Store中排列在你的畫布，然後訪問它們，就像這樣：？

var can = [new Stage(canvas1), 
      new Stage(canvas2), 
      new Stage(canvas3)]; 
for(var j=0;j<=3;j++){ 
    can[j].addChild(//image need to display); 
} 

這個不起作用的原因是因爲你不能建立這樣的變量名。 "can"+j將只返回一個字符串，"can1"，它沒有addChild函數。

Answer 2

除了很好的答案是Cerbrus了，這的jsfiddle展示瞭如何使用easeljs使用循環在自己單獨的畫布元素，以顯示您的圖片：http://jsfiddle.net/m1erickson/gxrSQ/

在這行代碼還請注意，您的can1變量實際上是一個Stage對象 - 不是畫布： can1 = new Stage（canvas1）;

這裏是通過imageUrls陣列循環和使用easeljs將圖像加載到單獨的畫布元素的腳本：

var images=[]; 
    var stages=[]; 
    // create an array to hold the path to each image 
    images.push("yourImage1.png"); 
    images.push("yourImage2.png"); 
    images.push("yourImage3.png"); 
    // call a function to load each of the images you pushed into images[]   
    loadImages(); 

    function loadImages(){ 
     // loop thru images 
     for(var i=0;i<images.length;i++){ 
      // create a new canvas for this image 
      var canvas = document.createElement("canvas"); 
      canvas.setAttribute("id", "can"+i); 
      document.body.appendChild(canvas); 
      stages.push(i); 
      // create a new image object 
      var img=new Image(); 
      img.index=i; 
      // important! -- wait until the image has been loaded 
      img.onload=function(e){ 
       // get the canvas element for this image 
       // and set the canvas.width and canvas.height 
       var c=document.getElementById("can"+this.index); 
       c.setAttribute("width",this.width); 
       c.setAttribute("height",this.height); 
       // create a new stage using this new canvas 
       var stage=new createjs.Stage(c); 
       // create a bitmap to feed into the new stage 
       var bmp=new createjs.Bitmap(this); 
       // add the bitmap to the stage 
       stage.addChild(bmp); 
       // update the stage (the image will display now) 
       stage.update(); 
       // save this new stage in an array 
       // in case you need it later 
       stages[this.index]=stage; 
      } 
      // set the image source from the images array 
      img.src=images[i]; 
     } 
    }