这个画布游戏中的动画只工作一次答案

【问题标题】：Animation in this canvas game only works once这个画布游戏中的动画只工作一次
【发布时间】：2015-10-04 09:32:00
【问题描述】：

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

我在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>

按下按钮可以释放气泡，里面会滚动数字。

我的问题是

如何让数字在某个时间点停止？我对文本值使用随机函数。
我的启动气泡按钮只能使用一次，我使用setInterval 来启动动画。我想要的是启动另一个气泡，之前的气泡仍然会继续动画直到它们消失。

【问题讨论】：

查看控制台，你有一个错误：Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.2) is negative.（第 32 行）
您应该尝试将代码放在 stackoverflow.com 上，因为外部链接往往会消失。此外，您应该将逻辑与绘图分离，以便代码更易于维护。使用变量来存储您希望显示的随机数，作为气泡的属性，并对其进行操作。此外，您使用 setInterval 进行绘图，如果您打算在画布上投入时间，则应该阅读 RequestAnimationFrame。
我给 CodePen 做了一些changes。半径变成负数，我已经包含了一个检查。每次启动时都需要重置某些变量，并且需要在半径变为负数和按下另一个按钮之前清除间隔。
@Elric 感谢您的建议，将尝试 RequestAnimationFrame。
@Xufox 是的，我对代码进行了更改，我从这里找到了一个很好的参考。这是结果 codepen.io/michael23/pen/xwqvpE 。我知道我也应该能够将颜色添加为变量，但我仍在学习，所以我对此非常满意。再次感谢您的帮助。

标签： javascript html canvas html5-canvas

【解决方案1】：

不要在 init 函数中返回 setInterval
使用 window.addEventListener("load", init); 加载窗口时调用您的 init 函数；
使用 window.requestAnimationFrame 制作动画

希望这会有所帮助:)

【讨论】：