畫布內容未顯示

Question

美好的一天， 我的畫布有問題。我正在使用boostrap，我想展示一些圖形。我有這樣的：

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

JavaScript的組成是這樣的：

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

我沒有錯誤，在顯示和畫布是空的。我認爲它與DOM有關...任何人都可以幫助我嗎？

Answer 1

• 您聲明init()功能範圍內的局部變量var ctx1 = ...。您無法在該功能之外訪問它。因此，在drawChart1()內訪問ctx1失敗。

• 此外，在drawChart1()內，您正在訪問一個ctx變量，該變量尚未在任何地方聲明。

• 您錯過了關閉class="...屬性的報價。

• 此外，<div>元件不支持onload屬性：How to add onload event to a div element?

更好的解決方案是通過上下文ctx作爲參數向drawChart1(ctx)功能。把你的腳本以下所有相關的DOM元素使得onload處理多餘的：

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