캔버스의 루프에서 별의 행을 만들려면 어떻게해야합니까?

Question

미국 국기의 캔버스 이미지에서 작업하고 있는데, 별 50 개를 만들 필요가 있지만 별개의 별 50 개를 만들고 싶지 않으므로 어떻게해야합니까? 여기 내 별개 코드가 하나의 별을 만듭니다.

class Star extends drawable{ 
    constructor(x = 0,y = 0, outerRadius = 0, innerRadius = 0, numberOfPoints = 0, lineWidth = 0,fillStyle = "#000",strokeStyle = "transparent",context){ 
    super(context,x,y,fillStyle,strokeStyle,lineWidth); 
    this.outerRadius = outerRadius; 
    this.innerRadius = innerRadius; 
    this.numberOfPoints = numberOfPoints; 
} 
draw(){ 
    super.draw(); 
    this.context.beginPath(); 
    this.context.moveTo(this.x,this.y - this.outerRadius); 
    this.numberOfPoints = this.numberOfPoints * 2; 
    let pointOffSetRadians = (2 * Math.PI)/this.numberOfPoints; 
    for(let i = 0; i < this.numberOfPoints; i++){ 
     let radX,radY; 
     if(i % 2 === 0){ 
      radX = this.outerRadius * Math.sin(i * pointOffSetRadians); 
      radY = this.outerRadius * Math.cos(i * pointOffSetRadians) * -1; 
     } else { 
      radX = this.innerRadius * Math.sin(i * pointOffSetRadians); 
      radY = this.innerRadius * Math.cos(i * pointOffSetRadians) * -1; 
     } 
     this.context.lineTo(radX + this.x, radY + this.y); 
    } 
    this.context.closePath(); 
    this.context.stroke(); 
    this.context.fill(); 
    super.afterDraw(); 
} 
} 
// For loop for multiple rectangles 
for(let i = 0; i < 7; i++){ 
let yPos = (rectSize+20)*i; 
     for(let j = 0; j < 7; j++){ 
      this.context.fillRect((rectSize+10)*j,yPos,this.width/-2,this.height/-2,this.width,this.height); 
      this.context.strokeRect(this.width/-2, this.height/-2, this.width, this.height); 
     } 
    } 
const star1 = new Star(24,130,18,7,5,0,"white","green",context4); 
star1.draw(); 
const usaRedStripe = new Rectangle(context4,340,40,"red","transparent",10,660,50); 

usaRedStripe.draw();

Answer 1

for 루프 만 사용하십시오.

for (i=1;i<=50;i++){ //Loop 50 times for 50 stars. 
    var x = 24 + (18 * i); //24 being the X of the first star, 18 being the width of each star. 
    var y = 130; //130 being the Y of the first row. 
    if (x > 203){ //203 is if this star instance is beyond the X bounds at the 10th star. 
     x = 24 + (18 * (i-9)); //Subtract 9 from i to put this instance back at the beginning of the row. 
    } 
    if (i mod 11 == 0){ //Divide by 11 and if remainder is 0 this should be a new row. 
     y = 130 + (7 * i); //Original Y + height of star * number of stars. 
    } 
    var tempStar = new Star(x,y,18,7,5,0,"white","green",context4); 
    tempStar.draw(); 
}