这个画布游戏中的动画只能运行一次

Question

我正在尝试创建一个简单的canvas游戏：

我在CodePen上有这段代码。

var canvas;
var ctx;
var x = 300;
var y = 400;
var r = 0;
var mx = 0;
var my = 0;
var WIDTH = 600;
var HEIGHT = 400;


function circle(x,y,r) {
  ctx.fillStyle = "blue";
  ctx.beginPath();
  var text = Math.floor(Math.random()*10000);
  var font = "bold " + (r*0.75) +"px serif";
  var textWidth = ctx.measureText(text).width;
  var textHeight = ctx.measureText("w").width;
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.fill();
  ctx.moveTo(50, 0);
  ctx.lineTo(50, 10);
  ctx.stroke();
  ctx.moveTo(100, 0);
  ctx.lineTo(100, 10);
  ctx.stroke();
  ctx.moveTo(150, 0);
  ctx.lineTo(150, 10);
  ctx.stroke();
  ctx.fillStyle = "black"; // font color to write the text with
  ctx.font = font;
  ctx.fillText(text, x - (textWidth/2), y + (textHeight/2));
  ctx.strokeStyle = '#000';  
  ctx.stroke();
}
 
function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
 
function init() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  return setInterval(draw, 10);
}
 
function draw() {
  clear();
  circle(x, y, r);

  if (y>=350){
      y=y-0.5;
      r=r+0.3;
  }
  if (y<=350){
      y=y-1;
      x=x-0.75;
  }
  if (y<=50){
      x=x+0.75;
      r=r-0.2;
  }
}

<canvas id="canvas" width="600" height="400"></canvas>
<button id="test" onclick="return init()">test</button>

通过按下按钮，您可以释放气泡，里面有滚动的数字。

我的问题是：

1. 我怎样能使数字在某个点停止？我使用随机函数来生成文本值。

2. 我的按钮只能发射一次气泡，我使用了 setInterval 来启动动画。我想要的是发射另一个气泡，之前的气泡仍然会继续动画直到消失。

- michael

---

看一下控制台，你有一个错误：Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.2) is negative.（第32行） - Siguza

你应该尝试在stackoverflow.com上发布代码，因为外部链接往往会消失。此外，你应该将逻辑与绘图分离，以使代码更易于维护。使用变量来存储要显示的随机数，作为气泡的属性，并进行操作。另外，如果你计划在画布上投入时间，你应该了解RequestAnimationFrame，而不是使用setInterval进行绘制。 - eri0o

我对这个CodePen进行了一些更改。半径变成了负数，我已经加入了检查。某些变量需要在每次启动时重置，并且必须在半径变成负数之前和另一个按钮按下之前清除间隔。 - Sebastian Simon

@Elric 谢谢你的建议，我一定会尝试使用 RequestAnimationFrame。 - michael

@Xufox，是的，我对我的代码进行了更改，我从这里找到了一个很好的参考。这是结果http://codepen.io/michael23/pen/xwqvpE。我知道我也应该能够将颜色作为变量添加，但我还在学习，所以我对此感到非常满意。再次感谢您的帮助。 - michael

Answer 1

1. 不要在init函数中返回setInterval
2. 当窗口加载时使用window.addEventListener("load", init);调用您的init函数
3. 使用window.requestAnimationFrame进行动画处理

希望这可以帮助您 :)

- DUUUDE123