KineticJS创建画布

Question

我对JavaScript/Canvas和KineticJS都是新手。

我知道创造这样的画布和舞台是可能的-

    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
    </script>

但我在想，如果我已经有了一张画布，那么我如何在它之外创建一个舞台呢？所以像这样的东西...

<canvas id="myCanvas"></canvas>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
    //How do I create a Kinetic.stage of the #myCanvas?
</script>

Answer 1

这个怎么样：

创建一个新的舞台。

创建一个新层。

创建一个与舞台大小相同的新图像。

将图像的图像源设置为myCanvas。

注意:我没有测试以下代码，但它应该可以进行+/-调整。

var myCanvasImg=new Kinetic.Image({
      x: 0,
      y: 0,
      image: document.getElementById("myCanvas").getContext("2d").toImageURL(),
      width: stage.getWidth(),
      height: stage.getHeight()
    });

将图像添加到图层，然后将图层添加到舞台。

包含myCanvas内容的Bang...New stage！