javascript - 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()
    });

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

砰……带有 myCanvas 内容的新舞台！