Difference between revisions of "Flags with Methods"

From ProgZoo
Jump to navigation Jump to search
Line 17: Line 17:
<pre class=ans>
<pre class=ans>
function drawFlag(ctx){
function drawFlag(ctx){
  function tri(x,y,cl){
    ctx.translate(x,y);
    cl.forEach((c,i)=>{
      ctx.fillStyle = c;
      ctx.fillRect(i*75/cl.length,0,75/cl.length,50);
    });
    ctx.translate(-x,-y);
  }
   ctx.fillStyle = 'gray';
   ctx.fillStyle = 'gray';
  ctx.fillRect(0,0,180,130);
   tri(10,10,['red','white','blue']);
   tri(ctx,10,10,'red','white','blue');
   tri(95,10,['red','yellow','blue']);
   tri(ctx,95,10,'red','white','blue');
  tri(10,70,['black','yellow','red']);
}
   tri(95,70,['green','white','green']);
 
function tri(ctx,x,y,c1,c2,c3){
  ctx.translate(x,y);
   ctx.fillStyle = c1;
  ctx.fillRect(0,0,25,50);
  ctx.fillStyle = c2;
  ctx.fillRect(25,0,25,50);
  ctx.fillStyle = c3;
  ctx.fillRect(50,0,25,50);
  ctx.translate(-x,-y);
}
}
</pre>
</pre>
</div>
</div>

Revision as of 08:29, 17 August 2021


Stars and Stripes

Several countries have flags that contain three colors in vertical stripes.

Draw the flags of:

  • France
  • Romania
  • Belgium
  • Nigeria
function drawFlag(ctx){
}
function drawFlag(ctx){
  function tri(x,y,cl){
    ctx.translate(x,y);
    cl.forEach((c,i)=>{
      ctx.fillStyle = c;
      ctx.fillRect(i*75/cl.length,0,75/cl.length,50);
    });
    ctx.translate(-x,-y);
  }
  ctx.fillStyle = 'gray';
  tri(10,10,['red','white','blue']);
  tri(95,10,['red','yellow','blue']);
  tri(10,70,['black','yellow','red']);
  tri(95,70,['green','white','green']);
}