移除画布，然后在同一位置添加新的画布。

Question

我有以下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); 
}

这将使画布正确地被移除，但我很难尝试将新的子元素（带有正确的上下文并且在已删除的子元素的相同位置）附加回DOM。

- ApathyBear

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

});

- user4698813

---

只需进行一个小修改（重新设置id属性），这个程序就能完美运行。 - ApathyBear

Answer 2

虽然Alfonso在技术上是正确的，但我会质疑这种方法的性能。删除并添加新的画布将增加开销，并可能导致不必要的闪烁。尽可能重复使用DOM元素是一个好习惯。

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

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

如何清除画布以进行重绘

- JoshuaJ

---

我很感激你的回答，但是我已经尝试过清除画布并使用销毁方法，但是这引起了一些问题。请参见此处。 - ApathyBear