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

最近一段时间，我一直在开发游戏引擎，最近我添加了所谓的影子DOM。所有它都是一个包含div的jQuery对象，因此我可以向其添加内容。每次经过一帧时，阴影DOM的内容都会复制到多个视口。我的问题是我无法复制canvas元素的状态。

有没有解决这个问题而不必更新每个视口中的每个画布元素的方法？

最佳答案

我发现最好的方法是创建另一个画布，然后通过以下方式将旧画布中的数据直接添加到新画布中：

//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节点是不够的。需要上述内容来复制画布及其数据。