使用 DOM 画布更新画布元素

Posted 2023-05-07

【中文标题】使用 DOM 画布更新画布元素

【英文标题】：update canvas element with a DOM canvas

【发布时间】：2012-01-12 21:41:44

【问题描述】：

假设我有

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

我愿意

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

之后我对myCanvas 进行了更改，并希望用我更新的DOM 画布替换 html-canvas。以下作品：

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

但 html（通过检查器）看起来像

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

什么时候应该是这样的

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

如何更新元素而不使用innerHTML？

【问题讨论】：

这种方法最多只能给你一个画布在另一个画布中。

【参考方案1】：

你不必更新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;