javascript - 从不在 DOM 树中的 jquery 对象复制画布节点

Question

最近一段时间我一直在研究游戏引擎，最近我添加了我称之为影子 DOM 的东西。它只是一个包含 div 的 jQuery 对象，因此我可以将内容附加到它。每经过一帧，shadow 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);

我发现仅仅复制canvas节点是不够的。以上是复制画布及其数据所必需的。

Answer 2

SO上有一个很好的回答你的问题：在JavaScript中深度克隆对象的最有效方法是什么？

Answer 3

找到了解决方案。我必须为画布的每个副本手动复制图像数据。请参阅任何方式来克隆 HTML5 画布元素及其内容？详情。