Javascript KineticJs添加了多个画布，而不是具有多个层的单个画布

我是kineticJs新手，正在一个kinetic.stage上添加多个图像

起初，我使用以下代码成功创建了画布：

var stage = new Kinetic.Stage({
    container: 'content',
    width: x,
    height: y
    });

//declare layer
var layer = new Kinetic.Layer();

//declare image
var baseImage = new Kinetic.Image({
  image: $('#img')[0];
});

layer.add(baseImage);
stage.add(layer);

但我必须每隔一段时间向画布添加越来越多的图像，因此我制作了一个函数，向画布添加另一个图像。我的代码是这样的

function addImageLayer(){
//declare layer
var layer2 = new Kinetic.Layer();

//declare image
var image2 = new Image();
image2.src = "../resources/images/frames/newYearBunny.png";

image2.onload = function(){
    var KineticImage2 = new Kinetic.Image({
        x: 200,
        y: 50,
        image: image2,
        draggable: true
    });


    layer2.add(KineticImage2);
    stage.add(layer2);
}}

不幸的是，我刚刚在现有的基础上添加了一个新的层，而我必须添加一个层。

---

谢谢

您可以将新图像添加到现有的

层

（确保在将新对象添加到图层以使其显示后，您可以使用layer.draw（）

function addImageLayer(){
    //declare image
    var image2 = new Image();
    image2.src = "../resources/images/frames/newYearBunny.png";
    image2.onload = function(){
        var KineticImage2 = new Kinetic.Image({
            x: 200,
            y: 50,
            image: image2,
            draggable: true
        });
        layer.add(KineticImage2);
        layer.draw();
    }
}