Question

好的，所以我正在学习HTML5，我想更新我的投资组合，以便有一个移动的黑洞，而不是一个静态的图片。我本可以拍摄照片并在画布上旋转它，但我认为如果我没有图像就完成了它会更好。我遇到的主要问题是我似乎无法理解如何计算（并因此更新）每个粒子沿圆形路径的路径。

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

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

粒子类

 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);       
  }
}

不断调用以更新画布并绘制点的函数

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();
  }
}

我已经设置了代码，因此我可以暂停和播放，从而打开和关闭更新方法。由于某种原因，当游戏开启时（它正在更新）我在画布上看不到任何东西，但是当我暂停所有的点都显示出来。所以这是第一个问题，我认为它可能与速度太高有关，所以我把它放下来，但是在更新发生时我无法看到粒子。每次我玩，然后暂停点显示，他们没有旋转，但沿x轴向右移动...我输出粒子的x和y坐标，似乎只有x值正在更新和只是上升这解释了他们的动议。

所以我有两个问题：

如何让每个粒子遵循自己的圆形路径，基于它与圆心，速度和当前x y坐标的距离。
如何在遵循上述路径的同时显示粒子（由于某些原因它们根本不显示，可能因为它们的速度？）

我的最终目标是让内圈呈空，然后靠近内圈半径的大量粒子快速移动。当你移动到黑洞的外半径时，粒子移动得更慢，然后更少的粒子。我整天都在四处寻找教程，除了循环路径的方程式之外，我没有找到太多相关内容。但我似乎无法实现这一点。

任何有关类似问题被破坏的见解或参考我都会非常感激。感谢您花时间阅读本文。

-Alan

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）你的角速度应该取决于粒子的距离。将角速度存储为粒子属性或者使用angle_incr = somefunction（particles [i] .dist）;可能是k * dist，或k * sqrt（dist），......

3）对于颜色，在clearRect之后用黑色绘制， - ＆gt;例如红色'＃F00'。

4）在for循环中缓存粒子[i]。（var thisPart = particles [i];）

如果您愿意，可以使用我的粒子引擎，它快速方便，文章就在这里：

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

Answer 2

你可以使用质子html5粒子引擎http://a-jie.github.io/Proton/ 这很容易！

创建粒子以遵循HTML5画布中的圆形路径

2 个答案: