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

【问题标题】：Text displaying twice in different fonts | Javascript Canvas文本以不同的字体显示两次 | Javascript 画布
【发布时间】：2019-04-04 02:48:48
【问题描述】：

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

游戏：Game
我的代码：Code

（错误图片）

【问题讨论】：

标签： javascript html html5-canvas repl.it

【解决方案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

【讨论】：

谢谢！为什么文本首先以不同的字体显示？我在填充之前定义了字体。
字体加载需要一些时间，因此它可能会在加载字体并开始绘制之前以默认浏览器字体呈现。