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

您在var ctx1 = ...函数的上下文中声明了局部变量init()。您无法在该功能之外访问它。因此，访问ctx1内的drawChart1()失败。
此外，在drawChart1()内，您正在访问尚未在任何地方声明的ctx变量。
您缺少关闭class="...属性的报价。
此外，<div>元素不支持onload属性：How to add onload event to a div element?

更好的解决方案是将上下文ctx作为参数传递给drawChart1(ctx)函数。将脚本放在所有相关DOM元素下面会使onload处理程序变得多余：

＆＃13;

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

＆＃13;

画布内容未显示

1 个答案: