3

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>
4

1 に答える 1

0

これはどう：

新しいステージを作成します。

新しいレイヤーを作成します。

ステージと同じサイズの新しいイメージを作成します。

画像の画像ソースを myCanvas に設定します。

注: 次のコードはテストしていませんが、+/- 微調整で動作するはずです。

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

イメージをレイヤーに追加し、レイヤーをステージに追加します。

バン…myCanvasコンテンツで新ステージ！

于 2013-03-20T20:18:49.403 に答える