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

发布于 2024-11-08 07:30:18 字数 165 浏览 12 评论 0 原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

扶醉桌前 2024-11-15 07:30:18

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

//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);

我发现仅复制画布节点是不够的。 复制画布及其数据需要上述内容。

I found the best way to do this is by creating another canvas then adding the data from the old canvas directly to the new one in the following way:

//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);

I found that just copying the canvas node is not enough. The above is needed to duplicate a canvas and its data.