Canvas Inhalt zeigt nicht

Question

Guten Tag, Ich habe ein Problem mit der Leinwand. Ich benutze Boostrap und möchte einige Grafiken zeigen. Ich habe dies:

<div id="charts" class="tab-pane fade"> 
    <div class="container-fluid-charts onload="init();"> 
    <div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div> 
     <canvas id="chart1">Your browser cannot display the charts...</canvas> 
    </div> 
</div> 

Das Javascript ist wie folgt zusammengesetzt:

function init() { 
    var c = document.getElementById("chart1"); 
    var ctx1 = c.getContext('2d'); 

    drawChart1(); 
} 

function drawChart1() { 
    ctx1.moveTo(ctx.canvas.width/2 , 0); 
    ctx1.lineTo(0, ctx.canvas.height); 
    ctx1.stroke(); 

    ctx1.beginPath(); 
    ctx1.arc(95,50,40,0,2*Math.PI); 
    ctx1.stroke(); 

    ctx1.font = "30px Arial"; 
    ctx1.fillText("Hello World",10,50); 
} 

ich keine Fehler haben zeigt, und die Leinwand ist leer. Ich denke, es hängt mit dem DOM zusammen ... Jeder kann mir bitte helfen?

Answer 1

• Sie erklären die lokalen Variable var ctx1 = ... im Rahmen der init() Funktion. Sie können nicht außerhalb dieser Funktion darauf zugreifen. Daher schlägt der Zugriff auf ctx1 innerhalb drawChart1() fehl.

• Auch innerhalb drawChart1(), greifen Sie auf eine ctx Variable zu, die nirgendwo deklariert wurde.

• Ihnen fehlt ein Angebot, das das Attribut class="... schließt.

• Auch das <div> Element unterstützt nicht die onload attribute: How to add onload event to a div element?

Eine bessere Lösung ist es, den Kontext ctx als Parameter an die drawChart1(ctx) Funktion zu übergeben. Platzieren Sie Ihr Skript unter allen relevanten DOM-Elemente macht die onload Handler überflüssig:

<div id="charts" class="tab-pane fade"> 
 
    <div class="container-fluid-charts"> 
 
    <div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div> 
 
    <canvas id="chart1">Your browser cannot display the charts...</canvas> 
 
    </div> 
 
</div> 
 
<script> 
 
    function drawChart1(ctx) { 
 
    ctx.moveTo(ctx.canvas.width/2, 0); 
 
    ctx.lineTo(0, ctx.canvas.height); 
 
    ctx.stroke(); 
 

 
    ctx.beginPath(); 
 
    ctx.arc(95, 50, 40, 0, 2 * Math.PI); 
 
    ctx.stroke(); 
 

 
    ctx.font = "30px Arial"; 
 
    ctx.fillText("Hello World", 10, 50); 
 
    } 
 

 

 
    var c = document.getElementById("chart1"); 
 
    var ctx = c.getContext('2d'); 
 

 
    drawChart1(ctx); 
 
</script>