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

專家提示：另外，請考慮進行逐步調試。 在這種情況下通常很有用。