обновить элемент canvas с помощью DOM canvas - PullRequest
Новая
       13

обновить элемент canvas с помощью DOM canvas

4 голосов
/ 05 декабря 2011

скажем, у меня есть 

var myCanvas = document.createElement('canvas');

и я 

myCanvas.setAttribute("id", "my-canvas");
document.body.appendChild(myCanvas);

После слов я изменяю на myCanvas и хочу заменить HTML-холст на мой обновленный DOM холст. Следующие работы: 

document.getElementById("my-canvas").innerHTML = myCanvas;

но HTML (через инспектора) выглядит как 

<canvas id="my-canvas">[object HTMLCanvasElement]</canvas>

Когда это должно выглядеть как 

<canvas id="my-canvas"></canvas>

Как я могу обновить элемент и не использовать innerHTML?

1 Ответ

7 голосов
/ 05 декабря 2011

Вам не нужно обновлять myCanvas , если это все тот же узел .Когда вы создаете узел и добавляете его, выполняйте DOM, тогда DOM-узел имеет значение live .Это означает, что все изменения на myCanvas будут немедленно отражены на странице.

replaceChild ()

В случае, если вы хотите заменить узел на другой узел вы можете использовать .replaceChild() в родительском элементе узла, который вы хотите заменить.

Пример: 

document.getElementById("parent").replaceChild(element, newElement);

Где parent является родительским элементом element. 

<div id="parent">
  <canvas id="element"></canvas>
</div>

innerHTML

В своем вопросе вы используете innerHTML.Если вы хотите просто заменить содержимое одного элемента содержимым другого элемента, используйте innerHTML на обоих из них.

Пример: 

document.getElementById("element").innerHTML = newElement.innerHTML;
...