javascript - 文本以不同的字体显示两次 | Javascript 画布

Question

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

游戏：游戏
我的代码：代码

（错误的图片）

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