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

Question

最近一段时间我一直在研究游戏引擎，最近我添加了一个我称之为影子 DOM 的东西。它只是一个包含 div 的 jQuery 对象，因此我可以向其附加内容。每次经过一帧时，影子 DOM 的内容都会被复制到多个视口(viewport)。我的问题是我无法复制 Canvas 元素的状态。

有没有办法在不必更新每个视口(viewport)中的每个 Canvas 元素的情况下解决这个问题？

Answer 1

我发现最好的方法是创建另一个 Canvas ，然后按以下方式将旧 Canvas 中的数据直接添加到新 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 节点是不够的。 以上内容是复制 Canvas 及其其数据所必需的。