javascript - 在Javascript中为对象数组创建不同的来源(Creating different Origins for Object Array in Javascript)

Question

I've established an array of 3 groups of 3 particles.(我建立了一个由3组3个粒子组成的数组。)

I bleive it has to do with altering the code portion below.(我认为这与更改下面的代码部分有关。) > let particles; > function init(){ > particles=[]; > for(let i=0; i<2;i+=1){ > for(var j=0; j<2;j+=1){ > particles.push(new Particle(centerX, centerY)); } > console.log(particles);} > console.log(particles); > } The particles are currently locate in the same position right now.(当前，粒子现在位于同一位置。) Is there a way to shift the origin of each particle by 50 both in x and y?(有没有办法将x和y的每个粒子的原点都偏移50？) Here is the full code:(这是完整的代码：) window.onload =function(){ var canvas = document.createElement ("canvas"); c = canvas.getContext("2d"); canvas.width = 400; canvas.height=400; document.body.appendChild(canvas); c.beginPath(); c.rect(0, 0, canvas.width, canvas.height); c.fillStyle = "white"; c.fill(); c.closePath(); var centerX=canvas.width/2; var centerY=canvas.width/2; function Particle(centerX, centerY){ this.centerX=canvas.width/2; this.centerY=canvas.width/2; this.radians=0; this.update=function(){ this.radians+=.1; this.centerX=this.centerX+Math.sin(this.radians)*2; this.centerY=this.centerY+Math.cos(this.radians)*2; this.draw(); }; this.draw=function(){ c. beginPath(); c.arc(this.centerX,this.centerY,5,0,2*Math.PI); c.fillStyle='black'; c.fill() } } let particles; function init(){ particles=[]; for(let i=0; i<2;i+=1){ for(var j=0; j<2;j+=1){ particles.push(new Particle(centerX, centerY)); } } } function animate (){ requestAnimationFrame(animate); c.beginPath(); c.rect(0, 0, canvas.width, canvas.height); c.fillStyle = "white"; c.fill(); c.closePath(); particles.forEach(particle=>{ particle.update(); }); } init(); animate(); } Thank you(谢谢)   ask by Nhan Bui translate from so

Answer 1

Yes - I change lines(是的-我换线)

this.centerX=canvas.width/2; this.centerY=canvas.width/2; to(至) this.centerX=centerX; this.centerY=centerY; and line particles.push(new Particle(centerX, centerY));(并线particles.push(new Particle(centerX, centerY));) to(至) particles.push(new Particle(centerX+i*50, centerY+j*50)); (and in that for loops which wrap this line change i<2 to i<=2 and similar with j) Run snippet and scroll down to see(（并且在for其中包裹该行变化循环i<2至i<=2和其中j类似）执行代码段，且向下滚动以查看) window.onload =function(){ var canvas = document.createElement ("canvas"); c = canvas.getContext("2d"); canvas.width = 400; canvas.height=400; document.body.appendChild(canvas); c.beginPath(); c.rect(0, 0, canvas.width, canvas.height); c.fillStyle = "white"; c.fill(); c.closePath(); var centerX=canvas.width/2; var centerY=canvas.width/2; function Particle(centerX, centerY){ this.centerX=centerX; this.centerY=centerY; this.radians=0; this.update=function(){ this.radians+=.1; this.centerX=this.centerX+Math.sin(this.radians)*2; this.centerY=this.centerY+Math.cos(this.radians)*2; this.draw(); }; this.draw=function(){ c. beginPath(); c.arc(this.centerX,this.centerY,5,0,2*Math.PI); c.fillStyle='black'; c.fill() } } let particles; function init(){ particles=[]; for(let i=0; i<=2;i+=1){ for(var j=0; j<=2;j+=1){ particles.push(new Particle(centerX+i*50, centerY+j*50)); } } } function animate (){ requestAnimationFrame(animate); c.beginPath(); c.rect(0, 0, canvas.width, canvas.height); c.fillStyle = "white"; c.fill(); c.closePath(); particles.forEach(particle=>{ particle.update(); }); } init(); animate(); }