Question

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

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

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

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

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

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

谢谢！

Answer 1

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

此外，您减少了timeLeft和然后调用clearRect，它将根据timeLeft的 new 宽度清除矩形。您想要根据“旧”timeLeft值的宽度清除，然后然后减少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你不会得到任何闪烁。在大多数情况下，重绘所有内容的性能损失通常都是可以忽略不计的，这使得事情变得更加简单。

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

1 个答案: