javascript - HTML5 Canvas 文本没有出现？

Question

我意识到这是一个常见问题，但我很困惑为什么 我的代码不起作用。 这是一个link我的 fiddle 有问题。 主要问题出现在第 85-87 行，它不显示。

ctx.fillStyle = "White";
ctx.font = '80pt Helvetica';
ctx.fillText("Hello World!",100, 100);

Answer 1

好吧，您正在执行更新，然后渲染。渲染会清除 Canvas ，因此文本也会被清除。

稍微改变一下顺序即可，例如: updated fiddle

function draw() {
    ctx.fillStyle = "Black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (gameState) {
        ctx.fillStyle = "White";
        ctx.fillRect(player.x, player.y, player.width, player.height);
        ctx.fillRect(ball.x, ball.y, ball.width, ball.height);
    }
    if (gameState === false) {      // draw text for example here instead
      ctx.fillStyle = "White";
      ctx.font = "bold 16px Arial";
      ctx.fillText("PONG", 100, 100);
    }
    //end of gameState
}

function game() {
    update();
    render();
}
//...
function render() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   draw();
}

专业提示:还要考虑进行逐步调试。这在这种情况下通常很有用。