從不在DOM樹中的jquery對象複製canvas節點

Question

我一直在研究最後一段時間的遊戲引擎，並且最近添加了我稱之爲影子DOM的內容。它是一個包含div的jQuery對象，所以我可以將它附加到它。每次幀結束時，陰影DOM的內容都被複制到多個視口。我的問題是我無法複製畫布元素的狀態。

反正有沒有必要更新每個視口中的每個畫布元素？

Answer 1

我發現這樣做是通過創建另一個畫布上，然後從舊的帆布直接將數據添加到新的一個按照以下方式的最佳途徑：

//Create a blank canvas to apply the old canvas to 
var newCanvas = jQuery('<canvas></canvas>'), 
    newCanvasContext = newCanvas.getContext('2d'); 

//size the new canvas to mirror the old canvas 
newCanvas[0].width = oldCanvas[0].width; 
newCanvas[0].height = oldCanvas[0].height; 

//copy the old canvas onto the new canvas with drawImage(); 
newCanvasContext.drawImage(oldCanvas[0], 0, 0, oldCanvas[0].width, oldCanvas[0].height); 

我發現只複製畫布節點不夠。上面的需要複製一個畫布和其數據。

Answer 2

有一個很好的回答你的問題就在這裏SO：What is the most efficient way to deep clone an object in JavaScript?

Answer 3

找到了解決辦法。我不得不爲每個畫布副本手動複製圖像數據。詳情請參閱Any way to clone HTML5 canvas element with its content?。