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

将您的画布存储在一个数组中，然后访问它们，如下所示：

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还向您展示了如何使用画架来使用循环在他们自己的单独画布元素中显示您的图像：http://jsfiddle.net/m1erickson/gxrSQ/

另外请注意，在这行代码中，你的can1变量实际上是一个Stage对象 - 而不是画布： can1 = new Stage（canvas1）;

这是脚本循环遍历imageUrls数组并使用easeljs将图像加载到单独的canvas元素中：

    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];
        }
    }

在循环画架中访问画布

2 个答案: