在循环画架中访问画布答案

【问题标题】：Access canvas in loop easeljs在循环画架中访问画布
【发布时间】：2013-01-22 12:47:59
【问题描述】：

我正在使用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 不是函数错误。如何访问？

谢谢，
沙迪亚

【问题讨论】：

标签： html canvas easeljs

【解决方案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 函数。

【讨论】：

【解决方案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];
        }
    }

【讨论】：