删除画布，然后在同一位置添加新画布答案

【问题标题】：Remove Canvas then add new Canvas in same spot删除画布，然后在同一位置添加新画布
【发布时间】：2015-05-07 01:52:18
【问题描述】：

我有以下 HTML 画布：

<div id="graphs">
  <canvas id="graph1"  ></canvas>
  <canvas id="graph2" ></canvas>
  <canvas id="graph3" ></canvas>
</div>

单击按钮后，我想删除画布#graph1 并将其替换为新的（chartjs）画布。所以我尝试了以下代码：

dayButton.addEventListener("click", function(){    
  var canvas = $("#graph1").get(0);
  canvas.parentNode.removeChild(canvas);
  var parent = $("#graphs").get(0);
  var new_canvas = document.createElement("canvas");
  var new_ctx =new_canvas.getContext("2d");
  myChart = new Chart(new_ctx).Line(somedata);
  parent.appendChild(new_canvas); 
}

这会使 Canvas 正确删除，但我很难尝试将新子项（具有正确的上下文并与已删除的子项位于同一位置）重新添加到 DOM 中。

【问题讨论】：

标签： javascript jquery html canvas chart.js

【解决方案1】：

您可以在旧画布之后插入画布，然后删除旧画布。新的将有它的位置。

dayButton.addEventListener("click", function() {

    function replaceCanvas(elem) {
        var canvas = document.createElement('canvas'),
            newContext = canvas.getContext('2d');
        // Insert the new canvas after the old one
        elem.parentNode.insertBefore(canvas, elem.nextSibling);
        // Remove old canvas. Now the new canvas has its position.
        elem.parentNode.removeChild(elem);
        return newContext;
    }

    var new_ctx = replaceCanvas(document.getElementById('graph1'));
    myChart = new Chart(new_ctx).Line(somedata);

});

【讨论】：

对此的一个小补充（重新设置 id 属性），这就像一个魅力。

【解决方案2】：

虽然 Alfonso 在技术上是正确的，但我会质疑这种方法的性能。删除和添加新的 Canvas 会增加开销并可能导致不必要的闪烁。 养成尽可能多地重用 DOM 元素的习惯是一种很好的做法。

我强烈建议清除旧的 Canvas，然后重新使用它。如有必要，重新分配其id，以便其他代码不会覆盖您的新图表。

清除画布可以很容易地完成：

How to clear the canvas for redrawing

【讨论】：

我很欣赏这个答案，但我已经尝试清除画布，并使用破坏。我造成了一些问题。见here。