删除 Canvas 然后在同一位置添加新的 Canvas

Question

我有以下 HTML canvas':

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

单击一个按钮，我想删除 canvas #graph1 并将其替换为新的 (chartjs) canvas。所以我尝试了以下代码：

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.

Answer 1

您可以在旧的后面插入canvas，然后删除旧的。新的会有它的位置。

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

});

Answer 2

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

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

清除 canvas 可以很容易地完成：

How to clear the canvas for redrawing

删除 Canvas 然后在同一位置添加新的 Canvas

Remove Canvas then add new Canvas in same spot

html

javascript

jquery

canvas

chart.js