1

HTML5プログラミングにeaseljsを使用しています。私の例では、3つのキャンバスがあります（can1、can2、can3はこれらの3つのキャンバスのステージであり、ループを使用してそのキャンバスに画像をロードする必要があります

例えば：

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)
}

"can"+jが機能していません。j.addChildが関数エラーではないことを示しています。これにアクセスする方法は？

ありがとう、
sathya

4

2 に答える 2

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

于 2013-02-07T07:40:20.357 に答える
0

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];
        }
    }
于 2013-02-07T08:44:33.013 に答える