Question

我意识到这是一个经常被问到的问题，但我对此感到非常困惑我的代码不起作用。这是我的小提琴link，我有问题。主要问题出现在第85-87行，它不显示。

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

Answer 1

嗯，你正在做更新，然后渲染。渲染清除画布，因此文本也被清除。

只需更改一下订单，例如： 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();
}

专业提示：还要考虑进行步骤调试。对于这样的情况，这通常很有用。

HTML5画布文字没有出现？

1 个答案: