Javascript 制作没有背景的kineticjs层

我目前有一些javascript从变量接收图像并将其加载到画布中。画布位于div中，以便使用kineticjs。我正在加载具有以下代码的正六边形：

function MakeShape()
  {
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 490,
    height: 225
  });
  var polyLayer = new Kinetic.Layer();

var hexagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 6,
    radius: 70,
    fill: 'red',
    offset: {
      x: 100,
      y: 0
    },
    draggable: true
  });

  polyLayer.add(hexagon);
    stage.add(polyLayer);
  }

---

但是，加载时，当我希望形状位于图像上方时，层接收画布的背景。我必须在图层和形状上绘制图像吗？在形状之前加载图像时，我应该如何执行此操作？谢谢。

我不确定您所说的“javascript从变量接收图像并将其加载到画布”是什么意思。我猜您的Canvas元素被分配了一个背景图像==该图像

无论如何，

new Kinetic.Stage

plus

new Kinetic.Layer

将创建一个覆盖

容器

元素的新画布。因此，放入Div和画布中的任何图像都将被KineticJS创建的新画布覆盖

底线…是的，将图像绘制到图层上（使用

new dynamic.image

），并用图像消除画布元素

祝你的项目好运

[添加示例代码]

var阶段=新的动力学阶段({
容器：'容器'，
宽度：490，
身高：225
});
var polyLayer=新的dynamic.Layer（）；
阶段。添加（多段层）；
var hexagon，图1；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg";
函数start（）{
//首先添加图像
//它的z指数将低于六边形的z指数
//因此，六边形将绘制在图像上
image1=新的动力学图像({
x:0,，
y:0，
图片：img，
});
polyLayer.add（图像1）；
六边形=新的动能.规则多边形({
x:stage.width（）/2，
y:舞台高度（）/2，
双方:6,，
半径：70，
填充：“红色”，
偏移量：{
x:100，
y:0
},
德拉格布尔：是的
});
添加（六边形）；
polyLayer.draw（）；
}

body{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：490px；
身高：225px；
}

顶部带有可拖动十六进制的背景图像。

我正在使用drawImage（）；在div内部的画布上。是否仍然可以在不移动加载的图像的情况下在div周围移动我的形状？这可能是通过使用多层或其他方法实现的。谢谢你的帮助！KineticJS根据添加图像和六边形的时间维护自己的z索引。如果先添加图像，则图像将位于六边形的后面。我已经用示例代码更新了我的答案。干杯