javascript - 在 HTML5 Canvas 中创建粒子以遵循圆形路径

Question

好吧，我正在学习 HTML5，我想更新我的作品集，让它有一个移动的黑洞，而不是一个静态的图片。我本可以只拍摄照片并在 Canvas 中旋转它，但我认为如果我在没有图像的情况下完成这一切会更好。我遇到的主要问题是我似乎无法理解如何计算(并因此更新)每个粒子沿圆形路径的路径。

我已经阅读了从极坐标转换为笛卡尔坐标的方程式，但显然我做错了什么。

以下是最相关的代码片段:

粒子类

 function particle(rad, vel, dist, angle, x, y){

   this.rad = rad;
   this.vel = vel;
   this.dist = dist;
   this.x = x;
   this.y = y;
   this.angle = angle;
} 

初始化正在使用的粒子的函数

function initParticles(parts, innerCircleRad, nbr_circles, w, h){
   var rad, vel, dist;

   for (var i = 1; i <= nbr_circles; ++i) {
      if(i < 10){
          rad = (Math.random()*2.5)+1;
          vel = (Math.random()*.5)+3;
          dist = (Math.random()*1.5) + innerCircleRad;
          angle = Math.floor(Math.random()*(360))
      }else if( i < 15){
          rad = (Math.random()*2.7)+1;
          vel = (Math.random()*.4)+2;
          dist = (Math.random()*1.5) + innerCircleRad+1;
          angle = Math.floor(Math.random()*(360))
      }else if( i < 18){
          rad = (Math.random()*2.8)+1;
          vel = (Math.random()*.3)+1;
          dist = (Math.random()*1.5) + innerCircleRad+2.5;
          angle = Math.floor(Math.random()*(360))
      }else {
          rad = (Math.random()*2.9)+1;
          vel = (Math.random()*.2)+1;
          dist = (Math.random()*1.5) + innerCircleRad+4;
          angle = Math.floor(Math.random()*(360))
      }

    var x = w/2 + Math.cos(angle) * dist;
    var y = h/2 + Math.sin(angle) * dist;
    parts[i] = new particle(rad, vel, dist, angle, x, y);       
  }
}

不断调用以更新 Canvas 和绘制点的函数

function refresh(dc,width,height,frame_number, particles, nbr_circles) {
  dc.clearRect(0,0,width,height);  
  dc.fillStyle='#000';

  for (var i = 1; i <= nbr_circles; ++i) {
    // set up increment for new angle based on particles velocity
    var angle_incr = ((frame_number)/12.0) * Math.PI/180;
    // updated new angle, make sure it is in correct range of circle
    particles[i].angle = (angle_incr+particles[i].angle)%Math.PI/180
    // set new x and y points based on the angle change
    particles[i].x = particles[i].x + Math.cos(particles[i].angle) * particles[i].dist;
    particles[i].y = particles[i].y + Math.sin(particles[i].angle) * particles[i].dist;

    // draw tiny circle at x,y
    dc.beginPath();
    dc.arc(particles[i].x, particles[i].y, particles[i].rad, 0, 2*Math.PI, false);
    dc.fill();
  }
}

我设置了代码，因此我可以暂停和播放，这会打开和关闭更新方法。出于某种原因，在播放时(它正在更新)我在 Canvas 上看不到任何东西，但是当我暂停时所有的点都会出现。所以这是第一个问题，我认为这可能与速度太高有关，所以我把它放下了，但是在更新过程中我无法随时看到粒子。每次我播放然后暂停点出现，它们没有旋转但沿 x 轴向右移动......我输出粒子的 x 和 y 坐标，似乎只有 x 值正在更新并且只会上升。这解释了他们的动议。

所以我的两个问题是:

1. 如何让每个粒子根据其与圆心的距离、速度和当前的 x y 坐标遵循自己的圆形路径。

2. 如何让粒子在遵循上述路径时显示(由于某些原因它们根本不显示，可能是因为它们的速度？)

我的最终目标是有一个空的内圈，然后有大量接近内圈半径的粒子快速移动。然后，当你向外移动到黑洞的外半径时，粒子会变少，那里的粒子移动速度会变慢。我整天都在四处寻找教程，但除了圆形路径的方程式之外，我没有找到太多相关的内容。但我似乎无法让它工作。

如果有任何解决类似问题的见解或引用，我将不胜感激。感谢您花时间阅读本文。

-艾伦

Answer 1

1) 你必须在每个粒子中有一个 centerX, centerY，或者共享它们(将它们设置在 particle.prototype 上)。 那么 x,y 的公式是:

particles[i].x = particles[i].centerX + Math.cos(particles[i].angle) * particles[i].dist;
particles[i].y = particles[i].centerY + Math.sin(particles[i].angle) * particles[i].dist;

2) 你的 Angular 速度应该取决于粒子的距离。要么将 Angular 速度存储为粒子属性，要么将 angle_incr = somefunction ( particles[i].dist );可能是 k*dist 或 k*sqrt(dist), ...

3) 对于颜色，您在 clearRect 之后绘制黑色，例如 -> 红色 '#F00'。

4) 在for循环中缓存particles[i]。 ( var thisPart = particles[i]; )

喜欢的话可以用我的粒子引擎，又快又方便，文章在这里:

http://gamealchemist.wordpress.com/2013/06/16/introducing-jsparkle-a-versatile-and-fast-javascript-particle-engine/