好的，所以我正在学习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坐标，使每个粒子遵循自己的圆形路径。
我如何在遵循上述路径的同时显示粒子（由于某种原因，它们根本不显示，可能是因为它们的速度？）
我的最终目标是拥有一个空的内圈，然后靠近内圈半径的许多粒子快速移动。然后，当您移到黑洞的外半径时，粒子的运动速度会变慢，从而减少了粒子数量。我整天都在寻找教程，除了循环路径方程之外，我没有发现其他重要的东西。但是我似乎无法正常工作。
任何解决类似问题的见解或参考资料，我将不胜感激。感谢您抽时间阅读。
-艾伦
最佳答案
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（particle [i] .dist）;可能是k * dist或k * sqrt（dist），...
3）对于颜色，您可以在clearRect之后绘制黑色，例如->红色'＃F00'。
4）在for循环中缓存粒子[i]。 （var thisPart =粒子[i];）
如果愿意，您可以使用我的粒子引擎，它既快捷又方便，本文在这里：
http://gamealchemist.wordpress.com/2013/06/16/introducing-jsparkle-a-versatile-and-fast-javascript-particle-engine/
关于javascript - 创建粒子以遵循HTML5 canvas中的圆形路径，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11927162/