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

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

我有这个密码

var画布；
var-ctx；
var x=300；
变量y=400；
var r=0；
var-mx=0；
var-my=0；
var宽度=600；
var高度=400；
函数圆（x，y，r）{
ctx.fillStyle=“蓝色”；
ctx.beginPath（）；
var text=Math.floor（Math.random（）*10000）；
var font=“bold”+（r*0.75）+“px衬线”；
var textWidth=ctx.measureText（text）.width；
var textHeight=ctx.measureText（“w”）.宽度；
弧（x，y，r，0，数学π*2，真）；
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”；//用于编写文本的字体颜色
ctx.font=font；
ctx.fillText（文本，x-（文本宽度/2），y+（文本高度/2））；
ctx.strokeStyle='#000'；
ctx.stroke（）；
}
函数clear（）{
ctx.clearRect（0，0，宽度，高度）；
}
函数init（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
返回设置间隔（抽签，10）；
}
函数绘图（）{
清除（）；
圆（x，y，r）；
如果（y>=350）{
y=y-0.5；
r=r+0.3；
}
如果（y）
不要在init函数中返回setInterval
使用window.addEventListener（“load”，init）加载窗口后，调用init函数
对动画使用window.requestAnimationFrame
希望这有帮助：）
查看控制台，您在那里有一个错误：
未捕获索引SizeError:未能在“CanvasRenderingContext2D”上执行“arc”：提供的半径（-0.2）为负数。
（第32行）您应该尝试将代码放在stackoverflow.com上，因为外部链接往往会消失。此外，您还应该将逻辑与绘图分离，以便代码更易于维护。使用变量将希望显示的随机数存储为气泡的属性，并对其进行操作。此外，您还可以使用setInterval进行绘图，您应该阅读有关Req的内容uestAnimationFrame，如果您计划在画布上投入时间。我已经对代码笔做了一些修改。半径变为负值，我已经对此进行了检查。每次启动时都需要重置某些变量，并且在半径变为负值和再次按下按钮之前需要清除间隔。@Elric感谢您的建议，will def try RequestAnimationFrame@Xufox是的，我对我的代码做了一个更改，我在这里找到了一个很好的参考。这就是结果。我知道我也可以添加颜色作为变量，但我仍在学习，所以我对此很满意。再次感谢你的帮助。