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

这个怎么样：

创建一个新阶段。

创建一个新图层。

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

将Image的图像源设置为myCanvas。

注意：我没有测试以下代码，但它应该工作+/-调整。

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

将图像添加到图层并将图层添加到舞台。

Bang ... myCanvas内容的新阶段！