javascript - JS 文本未出现在 HTML5 Canvas 上

Question

编程新手，我很困惑为什么文本不会出现在我的 Canvas 上。

HTML:

    <div id="gameWindow">
        <canvas id="gameCanvas" width="854" height="480"></canvas>
    </div>

JS:

function init() {
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");



    ctx.font = "32px Verdana";
    ctx.fillStyle = '#000';
    ctx.fillText("Hello World", 400, 400);
}

CSS:

#gameCanvas {
    margin: 0 auto;
    background: #ffffff;
    align-self: center;
    color: black;
    text-align: left;
}

抱歉，如果这是一个愚蠢的问题。

Answer 1

需要调用init方法

function init() {
  var canvas = document.getElementById("gameCanvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "32px Verdana";
  ctx.fillStyle = '#000';
  ctx.fillText("Hello World", 400, 400);
}
init() //Changed here

#gameCanvas {
  margin: 0 auto;
  background: #ffffff;
  align-self: center;
  color: black;
  text-align: left;
}

<div id="gameWindow">
  <canvas id="gameCanvas" width="854" height="480"></canvas>
</div>