0

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

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

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

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

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

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

谢谢！

4

1 回答 1

0

measureText() 返回一个具有宽度属性的对象，因此需要使用 c.measureText(timeLeft).width。

此外，您减少了 timeLeft，然后调用了 clearRect，它将根据 timeLeft 的新宽度清除一个矩形。您想根据“旧” 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 处的文本基线。

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

于 2012-08-19T18:34:21.353 回答