javascript、動的にキャンバスと描画コンテキストを関数内に読み込みます。文脈が消える

Question

要約すると、私は、キャンバスがajax呼び出しによって表示されるものと、それぞれに描画されるものを変更しています。主な問題は、私のメインの描画関数がgetContextで失敗し、欠落しているキャンバスのような奇妙な動作があることです（ただし、間違いなくあります）。ここで

は、私は私のキャンバス上に描画するために使用する機能です。

function PlotSet(plot_properties){ 
    var p = plot_properties; 
    var canvas = document.getElementById(p.panel_name); 
    var spinner_target = document.getElementById(p.spinner_name); 
    if (!canvas) { 
     alert('Error: Cannot find the canvas element!'); 
     return; 
    } else if (!canvas.getContext) { 
     alert('Error: Canvas context does not exist!'); 
     return; 
    } else { 
     var ctx = canvas.getContext('2d'); 
     /*Do the drawing*/ 
    } 
} 

私はどのように多くの決定私のページのセクションやパネル/キャンバスの配置に3つのボタンがあります。誰かがクリックすると、そのアレンジを持つ別のPHPページが読み込まれます。

<div id="panel_single" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-one-panel"></div> 
<div id="panel_split" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-four-panel"></div> 
<div id="panel_rows" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-list-panel"></div> 
<script> 
    $("#panel_single_settings").hide(); 
    $("div[name=panel_control]").click(function(event) { 
     var nav_id = $(this).attr("id"); 
     if(nav_id == "panel_single"){ 
      $("#panel_single_settings").show(); 
     }else{ 
      $("#panel_single_settings").hide(); 
     } 
     //$("span[name=vnav-text]").removeClass("vnav-active"); 
     //$("#" + nav_id).addClass('vnav-active'); 
     refresh_content($(".widget-panel"), nav_id, function(){ 
      side_panel_hide($(".side_panel"), "600px"); 
     }); 
    }); 
</script> 

ページを読み込んだ後でこれらをクリックするとすべて動作します。しかし、私は図面のプロパティを変更/再描画するときに2つの問題があります。 （1）複数のキャンバスが表示されているときに、最初にキャンバスを描画したときに描画されたキャンバスを再描画するときに、最初のキャンバス以外のすべてのgetContextでPlotSet関数が失敗します（ポップアップフォームをajaxで再描画します）。 （2）1つのパネルしか表示されていない場合は、設定を変更してパネルを再描画することができますが、複数のパネルを含むページをロードすると、最初のパネルを除くすべてのパネルは空白になりますキャンバスを別のページに再描画したとき）。

シングルパネルの例：

<script> 
    var plot_properties = { 
     //Settings to draw 
    } 
    PlotSet(plot_properties); 
</script> 

マルチパネル構成の一例：

<canvas class="analytics-graph-medium" id="graph_send"></canvas>   
<canvas class="analytics-graph-medium" id="graph_recv"></canvas> 
<canvas class="analytics-graph-medium" id="graph_cpu"></canvas> 
<canvas class="analytics-graph-medium" id="graph_ram"></canvas> 


<script> 
    var split_send_plot_properties = { 
     //Settings to draw 
    } 
    PlotSet(split_send_plot_properties); 

    var split_recv_plot_properties = { 
     //Settings to draw 
    } 
    PlotSet(split_recv_plot_properties); 
    . 
    . 
    . 
    //************************************************************** 
    //Panel Settings Events 
    //************************************************************** 
    $("#cpu_panel_settings").on("click", function(){ 
     var panel_name = $(this).attr('id'); 
     set_side_panel_html($(".side_panel"), "/gui/pages/status/dialogs/panel_settings.php", split_cpu_plot_properties, function(){ 
      side_panel_show($(".side_panel"), "500px"); 
     }); 
    }); 
    . 
    . 
    . 
</script> 

そして、この設定を変更するためのボタンアクションを提出している。

$("#mod_panel").click(function(){ 
      plot_properties = { 
       //lots of properties to be drawn 
      } 
      PlotSet(plot_properties); 
      side_panel_hide($(".side_panel"), "600px"); 
     }); 

Answer 1

まあ、私は問題を解決したようです。私はまだ問題を理解していませんが、解決策は、同じ名前の新しいキャンバスを追加し、古いキャンバスを削除して、同じ古い名前の新しいキャンバスをgetElementByIdで取り戻すことです。しかし、キャンバスを見つけることができますが、コンテキストは存在しません。そうでなければ元のコンテキストを使用してください。

function PlotSet(plot_properties){ 
     var p = plot_properties; 
     var spinner_target = document.getElementById(p.spinner_name); 
     var canvas = document.getElementById(p.panel_name); 
     if (!canvas) { 
      alert('Error: Cannot find the canvas element!'); 
      return; 
     } else if (!canvas.getContext) { 
      var new_canvas = document.createElement(p.panel_name); 
      canvas.parentNode.insertBefore(new_canvas, canvas.nextSibling); 
      canvas.parentNode.removeChild(canvas); 
      canvas = document.getElementById(p.panel_name); 
     } 
     var ctx = canvas.getContext('2d'); 
     //Draw Something 
} 

これは、すべての作業、それらの上に複数のキャンバスを持つすべての動的ページの読み込みを行い、加えて任意のキャンバスの設定/描画を変更し、chaneが行われた後にページを切り替えます。

問題を引き起こした原因や解決策が何であったかについて、誰かがさらに深く理解していれば、私は熱心な耳です。