Question

我有以下HTML画布＆＃39;：

<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中。

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

});

Answer 2

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

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

清理画布非常容易：

How to clear the canvas for redrawing

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

2 个答案: