Скопируйте узел холста из объекта jquery, не входящего в дерево DOM

Question

Я работал над игровым движком совсем недавно, и недавно я добавил то, что я называю теневым DOM. Все это объект jQuery, который содержит div, поэтому я могу добавлять к нему вещи. Каждый раз, когда проходит кадр, содержимое теневого 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 вы найдете отличный ответ на свой вопрос: Какой самый эффективный способ глубокого клонирования объекта в JavaScript?

Answer 3

Нашел решение.Мне пришлось копировать данные изображения вручную для каждой копии холста.См. Как можно клонировать элемент HTML5 canvas с его содержимым? для получения подробной информации.