javascript - Canvas 内容未显示

Question

美好的一天，我的 Canvas 有问题。我正在使用 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);
}

我没有显示错误， Canvas 是空的。我认为这与 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处理程序多余:

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