使用 clearRect(） 覆盖画布上的文本输出

using clearRect() to overwrite text output on canvas?

本文关键字：文本 输出 clearRect 覆盖 使用      更新时间：2023-09-26

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

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

而是在单击圆圈时在圆上绘制一个 clearRect。我想对文本做类似的事情。我用了这行：

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

这应该有效，但没有效果。我已经尝试了所有方法，但我不知道这条线有什么问题。我唯一的另一个理论是代码中的错误位置，但我没有发现问题。

这是我正在处理的当前版本的链接：http://jsbin.com/touchgame/10/edit

谢谢！

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));
}

这应该有效。由于绘制文本的工作方式，准确知道文本的边界框并非易事，因此我们清除的区域比 fontSize 更大。您可以使用 c.textBaseline = 'top'，这会将顶部坐标的文本放在您指定的 y 处，而不是文本的基线位于 y。

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

相关文章：