KineticJS創建畫布

我是JavaScript/Canvas和KineticJS的新手。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>

來源

2013-03-20 Joe Slater

如何：

創建一個新的階段。

創建一個新圖層。

創建一個與舞臺大小相同的新圖像。

將圖像的圖像源設置爲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內容的新舞臺！

來源

2013-03-20 20:18:49 markE

我想你誤會了我。我正在尋找初始化我的Kinetic Stage，但不是創建舞臺到容器div中，我不想創建它，而是給它一個名爲myCanvas的現有畫布。我不認爲答案會如此複雜，只是我是一個新手而不是恰當地解答問題。爲此說。如果你不明白我在說什麼，請問澄清。 – 2013-03-20 20:23:26

注意：myCanvas空閒。這不是我想要將它的內容複製到舞臺上。 – 2013-03-20 20:27:54

一點也不復雜......不能像KineticJS那樣按照你的建議來完成！好吧，不是沒有拉開源代碼;） – markE 2013-03-20 20:32:35

KineticJS創建畫布

回答

相關問題