HTML5 Canvas文字没有出现？

Question

我意识到这是一个常见问题，但是我对为什么我的代码无法正常工作感到非常困惑。 这是我有问题的小提琴的链接 。 主要问题在第85-87行不显示的地方发现。

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

Answer 1

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

只需稍微更改顺序即可，例如： 更新小提琴

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();
}

专家提示：另外，请考虑进行逐步调试。 在这种情况下通常很有用。