Javascript 如何制作一个for循环，在循环动画完成之前重新启动循环动画，使其看起来像一个脉动的循环

我有一个不断增长的循环的代码，但我正在努力使几个循环在canvas/javascript中增长。我想让它看起来像是在脉动，像声波一样不断地旋转。我对编码相当陌生，所以我不确定语法，但大致是

if（圆的半径>画布的宽度/30px）{create new circle}

这是我到目前为止的代码

window.onload=function(){
    function animate() {
        var c=document.getElementById("myCanvas");
        var ctx= c.getContext("2d");
        ctx.clearRect(0, 0, c.width, c.height);

        if(i > 200) {
            i = 1;
        }

        if( i > 40) {
            ctx.beginPath();
            ctx.arc(c.width/2, c.width/2, i-40, 0, 2 * Math.PI, true);
            ctx.lineWidth = 7;
            ctx.stroke();
        }
        i++;
        setTimeout(animate, 10);
    }
    var i = 0;
    animate();
  }
}

---

我试着输入

if（i>30px）animate（）和其他变体，但没有运气。提前谢谢你
 尝试下面的动画代码



window.onload=function（）{
函数animate（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.clearRect（0，0，c.宽度，c.高度）；
如果（i>300）{//调整位置需要在画布上停止动画，停止点靠近原点的像素数是多少
i=1；
}
如果（i>1）{
var j=0；
虽然（谢谢你的回答！！！还有代码！我已经制作了两张画布，并将使用此代码制作一个低频动画和一个高频动画。有什么理由我不能复制代码，稍微改变宽度，然后将其分配给画布2？动画没有播放：/你正在为画布使用两个不同的上下文？它们会如果这是你的意思，那么在getContext中有2d！出于某种原因，两个代码都不能在fiddle中播放，但它们一次只能播放1个。如果两个代码都存在，则只有myCanvas2会显示，如果myCanvas2被删除，myCanvas1会播放..谢谢你的回答！在同一windo中插入animate1和animate2w、 onload函数。并且，避免对i变量进行多重声明。