Javascript 使用clearRect（）覆盖画布上的文本输出？

我正在jsbin上做一个小游戏，到目前为止一切都很顺利，但我有一个小问题。游戏的目标是在一分钟内尽可能多地点击随机出现的圆圈。我想让它输出剩余时间和角落里的分数，我已经这样做了。问题是它们正在相互覆盖。这是因为为了防止闪烁，我决定不使用

c.clearRect(0,0,canvas.width,canvas.height);

相反，单击圆时，在圆上方绘制一个clearRect。我想对文本做类似的事情。我用了这句话：

c.clearRect(0,fontSize,c.measureText(timeLeft),fontSize);

这应该行得通，但没有效果。我什么都试过了，但我不知道这条线怎么了。我唯一的另一个理论是它在代码中的错误位置，但我没有发现问题

以下是我正在处理的当前版本的链接：

谢谢

measureText（）返回一个具有width属性的对象，因此需要使用c.measureText（timeLeft）.width

另外，您减少了timeLeft，然后调用了clearRect，它将根据timeLeft的新宽度清除一个矩形。要根据“旧”时间长度值的宽度进行清除，然后减小时间长度：

if (timeLeft < 1){
  c.clearRect(0,fontSize,c.measureText(timeLeft).width + 5,fontSize*1.5);

  timeLeft--;
  //clear over time output

  console.log(c.measureText(timeLeft));
}

if（timeLeft<1）{
c、 clearRect（0，fontSize，c.measureText（timeLeft）。宽度+5，fontSize*1.5）；
时间限制--；
//随时间清除输出
console.log（c.measureText（timeLeft））；
}

这应该行得通。由于绘制文本的方式，准确地知道文本的边界框并不是一件小事，所以这就是为什么我们清除的区域比fontSize大的原因。您可以使用c.textBaseline='top'，这将使文本的顶部坐标位于您指定的y处，而不是文本的基线位于y处

最后，我认为当您想要更新图形时，完全清除画布并重新绘制所有内容是一种更简单的方法。如果清除画布，然后立即重新绘制所有内容，则不会出现任何闪烁。在大多数情况下，重新绘制所有内容对性能的影响通常是可以忽略的，这会使事情变得简单很多