以不同字体显示两次的文本 | Javascript Canvas

Question

我正在 repl.it 使用 javascript 创建游戏。我运行遇到了游戏菜单屏幕的问题。我游戏的标题文本以不同的字体显示两次。但是，如果我刷新 window，文本显示正常。是什么原因造成的，我该如何解决？谢谢。

游戏：Game
我的代码：Code

（错误图片）

Answer 1

您需要运行 ctx.clearRect(0, 0, width, height) 在您的菜单函数中呈现您的文本之前清除之前绘制的文本，然后再重新绘制它。

function menu() {
    ctx.clearRect(0, 0, width, height);
    ctx.font = "75px Oswald";
    ctx.textAlign = "center";
    ctx.fillStyle = txtColor;
    ctx.fillText("Almost Pong!", 250, 200);
    ctx.font = "25px Oswald";
    ctx.fillText("space for two player", 250, 250);
    ctx.fillText("c for one player", 250, 300);
    if (start) {
      addEventListener('keydown', keyDown2, false); addEventListener('keyup', keyUp2, false);
      start = false;
      clearInterval(me_nu);
      anim = setInterval(game, 10);
    }
    if (compStart) {
      p1.name = "CPU";
      compStart = false;
      clearInterval(me_nu);
      anim = setInterval(game, 10);
      compute = true;
    }
 }

固定代码：https://repl.it/repls/MediumpurpleNearMalware

结果：https://mediumpurplenearmalware--five-nine.repl.co

以不同字体显示两次的文本 | Javascript Canvas

Text displaying twice in different fonts | Javascript Canvas

html

javascript

html5-canvas

repl.it