Javascript 使kineticjs使用现有画布

我正在尝试与现有画布一起使用。问题在于，dynamic.js API要求您指定容器元素的id，然后dynamic.js创建一个

dynamic.Stage

（它创建并使用自己的画布）

例如：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();

  var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
  });

  // add the shape to the layer
  layer.add(rect);

  // add the layer to the stage
  stage.add(layer);
</script>

var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：200
});
var layer=新的动能层（）；
var rect=新的动能.rect({
x:239，
y:75，
宽度：100，
身高：50，
填充：“绿色”，
笔画：“黑色”，
冲程宽度：4
});
//将形状添加到层中
层。添加（rect）；
//将层添加到舞台
阶段。添加（层）；

我希望能够将现有的canvas元素与kinetic.js一起使用，而不是创建自己的元素。这可能吗

A以前被问过，但是它似乎没有提供正确的答案

---

有什么想法吗？谢谢

html画布只是一堆像素

您可以将这些像素转换为图像，然后将该图像用作Kinetic.image的源

// create an image from the existing canvas

var canvas2Image=new Image();
canvas2Image.onload=function(){

    // create a Kinetic.Image using that image

    var kImage=new Kinetic.Image({
        x:0,
        y:0,
        width:canvas2Image.width,
        height:canvas2Image.height,
        image:canvas2Image
    });

}
canvas2Image.src=canvas.toDataURL();

---

我试图让kinetic使用现有画布作为舞台，而不是创建另一个画布的kinetic image对象。我希望kinetic能够将kinetic层应用到我创建的画布上，而不是通过实例化

kinetic.Stage

Understand…将现有html画布插入kinetic中是不可能的--苹果vs橙子。然而，“像素就是像素——仅此而已”。由于html画布只是像素，您可以使用这些像素轻松填充Kinetic.Image。如果您正在对html画布执行动态操作，只需（1）var kImage=Kinetic.Image，并且每当html画布更新时（2）kImage.setImage（canvas2Image）。如果您已经为html画布创建了“智能对象”，那么您的任务就是将这些JS对象移植到Dynamic对象中。干杯另外一个想法是：Dynamic.Shape为您提供了一块空白画布。可以使用常用的上下文命令在画布上绘制。因此，您可以在html画布上抓取正在执行的任何操作，并在Dynamic.Shape上轻松执行相同的操作：（警告：Dynamic.Shape提供给您的画布/上下文存在一些限制。它们大多是围绕实际html画布+上下文的全功能包装。您可以使用此.getContext（）获取实际上下文；