Question

我使用Canvas编写了一个用JavaScript编写的粒子动画。我想要做的是更改画布绘图值，特别是radMax和radMin。我在这里编写了代码供您查看：https://jsfiddle.net/u3wwxg58/

现在发生的事情是，当我调用函数f（）时，使用正确的radMax和radMin值添加新粒子，而不是更新当前＆＃34;绘图＆＃34;使用新的radMax和radMin值。基本上，我想要做的就是在调用函数f（）时简单地使我的球体/动画更大。

我的drawParticle（）代码

add_action( 'template_redirect', 'redirect_users' );
function redirect_users( $template ) {
    if ( !is_user_logged_in() ) {
        if ( !is_page( 'register page ID' ) ) {
            wp_redirect( wp_login_url() );
        }
    }

    return $template;
}

和我更新值的代码：

var cvs = document.createElement('canvas'),
context = cvs.getContext('2d');
document.body.appendChild(cvs);

var numDots = 500,
        n = numDots,
        currDot,
        maxRad = 100,
    minRad = 90,
    radDiff = maxRad-minRad,
    dots = [],
    PI = Math.PI,
    centerPt = {x:0, y:0};

    resizeHandler();
    window.onresize = resizeHandler;

    while(n--){
        currDot = {};
        currDot.radius = minRad+Math.random()*radDiff;
        currDot.radiusV = 10+Math.random()*50,
        currDot.radiusVS = (1-Math.random()*2)*0.005,
        currDot.radiusVP = Math.random()*PI,
        currDot.ang = (1-Math.random()*2)*PI;
        currDot.speed = 0;
        //currDot.speed = 1-Math.round(Math.random())*2;
        //currDot.speed = 1;
        currDot.intensityP = Math.random()*PI;
        currDot.intensityS = Math.random()*0.5;
        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);
    }

    function drawPoints(){
        var n = numDots;
        var _centerPt = centerPt,
            _context = context,
            dX = 0,
            dY = 0;

        _context.clearRect(0, 0, cvs.width, cvs.height);

        var radDiff,currDot;
        //draw dots
        while(n--) {
            currDot = dots[n];
            currDot.radiusVP += currDot.radiusVS;
            radDiff = currDot.radius+Math.sin(currDot.radiusVP)*currDot.radiusV;
            dX = _centerPt.x+Math.sin(currDot.ang)*radDiff;
            dY = _centerPt.y+Math.cos(currDot.ang)*radDiff;

            //currDot.ang += currDot.speed;
            currDot.ang += currDot.speed*radDiff/40000;
            currDot.intensityP += currDot.intensityS;
            currDot.intensity = Math.round(currDot.intensityO+Math.sin(currDot.intensityP)*currDot.intensityV);

            //console.log(currDot);
            _context.fillStyle= 'rgb('+currDot.intensity+','+currDot.intensity+','+currDot.intensity+')';
            _context.fillRect(dX, dY, 1, 1);
            console.log('draw dots');

        } //draw dot
        window.requestAnimationFrame(drawPoints);
    }

    function resizeHandler(){
        var box = cvs.getBoundingClientRect();
        var w = box.width;
        var h = box.height;
        cvs.width = w;
        cvs.height = h;
        centerPt.x = Math.round(w/2);
        centerPt.y = Math.round(h/2);
    }

 drawPoints();

图片显示我想要做的事：https://postimg.org/image/9uhb3jda9/ 所以左边一个是在调用函数f（）之前，右边一个是在调用f（）之前。

Answer 1

函数f正在添加点，因为语句currDot = {};创建了一个新对象，而语句dots.push(currDot); 将它添加到点阵列中。

如果您将其更改为：

currDot = dots[n];

并移除推动然后它将作用于现有的点。

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

据推测，您打算随着时间的推移增加点数。也许你真正想要的只是完全取代现有的点？在这种情况下，只需在while循环之前粘贴dots = [];，然后按原样保留其余部分。

Answer 2

再次迭代所有粒子只是为了改变效果的大小。在渲染粒子时执行此操作。

从代码中添加变量radiusGrowAt并在每次渲染时增加每个点半径。 radiusGrowAt假设帧速率恒定且为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

然后

    //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

在javascript中更新画布值

2 个答案: