在javascript中更新画布值

我有一个使用画布用JavaScript编写的粒子动画。 我试图做的是更改画布绘图值，特别是radMax和radMin。我在这里编写了代码供您查看：

现在发生的情况是，当我调用函数f（）时，新粒子将使用正确的radMax和radMin值添加，而不是使用新的radMax和radMin值更新当前“图形”。基本上，我试图做的是在调用函数f（）时简单地使球体/动画变大

drawParticle（）的我的代码

以及用于更新值的代码：

var myi = 0, timex = 20;

         function f() {
         numDots =500+myi*10; maxRad = 300;minRad = 200 ; n=numDots;
         while(n--){
            currDot = {};
            currDot.radius = minRad+Math.random()*radDiff;
            currDot.radiusV = 10+Math.random()*500,
            currDot.radiusVS = (1-Math.random()*2)*0.005,
            currDot.radiusVP = Math.random()*PI,
            currDot.ang = (1-Math.random()*2)*PI;
            currDot.speed = (1-Math.random()*2);
            //currDot.speed = 1-Math.round(Math.random())*2;
            //currDot.speed = 1;
            currDot.intensityP = Math.random()*PI;
            currDot.intensityS = Math.random()*0.05;
            currDot.intensityO = 64+Math.round(Math.random()*64);
            currDot.intensityV = Math.min(Math.random()*255, currDot.intensityO);
            currDot.intensity = Math.round(Math.random()*255);
            currDot.fillColor = 'rgb('+currDot.intensity+','+currDot.intensity+','+currDot.intensity+')';
            dots.push(currDot);
            //setTimeout(function(){n++},1000);
        }
        myi++;
         if( myi < timex ){
        setTimeout( f, 500 );
    }}
    f();

var myi=0，timex=20；
函数f（）{
numDots=500+myi*10；maxRad=300；minRad=200；n=numDots；
而（n--）{
currDot={}；
currDot.radius=minRad+Math.random（）*radDiff；
currDot.radiusV=10+Math.random（）*500，
currDot.radiusVS=（1-Math.random（）*2）*0.005，
currDot.radiusVP=Math.random（）*PI，
currDot.ang=（1-Math.random（）*2）*PI；
currDot.speed=（1-Math.random（）*2）；
//currDot.speed=1-Math.round（Math.random（））*2；
//currDot.speed=1；
currDot.intensityP=Math.random（）*PI；
currDot.intensityS=Math.random（）*0.05；
currDot.intensityO=64+Math.round（Math.random（）*64）；
currDot.intensityV=Math.min（Math.random（）*255，currDot.intensityO）；
currDot.intensity=Math.round（Math.random（）*255）；
currDot.fillColor='rgb（'+currDot.intensity+'、'+currDot.intensity+'、'+currDot.intensity+'）；
点。推（currDot）；
//setTimeout（函数（）{n++}，1000）；
}
myi++；
if（myi

显示我想做什么的图片：

---

左一个是在调用函数f（）之前，右一个是在调用函数f（）时。

函数f添加点，因为语句

currDot={}

创建一个新对象，语句

dots.push（currDot）
将其添加到点阵列中

如果将其更改为：

currDot = dots[n];

然后移除推力，它将作用于现有的点

但是，这仅在
myi
为零时有效

大概你打算随着时间的推移增加点的数量。也许你真正想要的只是完全替换现有的点？
在这种情况下，只需粘贴
dots=[]，其余部分保持原样。
仅为了更改效果的大小而再次迭代所有粒子没有意义。在渲染粒子时执行此操作

从代码中添加变量
radiusGrowAt
，并在每次渲染时增加每个点半径
RadiusGrowt
假设帧速率恒定且为60fps

   //just after document.body.appendChild(cvs) where you declare and define
    maxRad = 20,
    minRad = 10,
    radDiff = maxRad-minRad,
    //=================================================================
    radiusGrowAt = 20 / 60, //<<== add this  // grow 20 pixels every 60 frames (one second)
    //=================================================================
    dots = [],
    PI = Math.PI,
    centerPt = {x:0, y:0};       
    ... etc

//就在document.body.appendChild（cvs）之后，在这里声明和定义
maxRad=20，
minRad=10，
radDiff=maxRad-minRad，
//=================================================================
RadiusGrowt=20/60，//请简化您的问题。这很难理解，什么不起作用？对不起，我已经更新了说明并添加了图片。谢谢@soviutz只是一个旁注-在生成随机数时，通常最好使用Math.floor而不是Math.round，因为后者。
   //just after document.body.appendChild(cvs) where you declare and define
    maxRad = 20,
    minRad = 10,
    radDiff = maxRad-minRad,
    //=================================================================
    radiusGrowAt = 20 / 60, //<<== add this  // grow 20 pixels every 60 frames (one second)
    //=================================================================
    dots = [],
    PI = Math.PI,
    centerPt = {x:0, y:0};       
    ... etc

    //draw dots
    while(n--) {
        currDot = dots[n];
        //=================================================================
        currDot.radius += radiusGrowAt; //<<== add this line
        //=================================================================
        currDot.radiusVP += currDot.radiusVS;
        radDiff = currDot.radius+Math.sin(currDot.radiusVP)*currDot.radiusV;
        ... etc