Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
161 views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...