画布内容未显示

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>