Flags with Rectangles: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
Tag: Reverted
No edit summary
Tag: Manual revert
 
Line 1: Line 1:
<pre id='shellbody' data-qtp='canvas'></pre>
<pre id='shellbody' data-qtp='canvas'></pre>
==Movement in Squares==
You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin|Flag of Benin]]
*You will need to use the method [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect fillRect]
*You will need to use the property [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle fillStyle]


<div class='qu' data-width="240" data-height="240">
==Libya==
For each of the first 16 columns the width is 90% of the previous. This pattern is reversed for the remainder. There are 31 columns.
 
<div class='qu' data-width="150" data-height="100">
The flag of Libya, until 2011, was a simple green rectangle.
Try the program as it is given, then change it so that the green rectangle is 150 wide.
[[Image:flaglibya.png|border]]
<pre class='usr'>
<pre class='usr'>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,75,100);
</pre>
<pre class='ans'>
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,150,100);
</pre>
</div>
==France==
<div class=qu data-width="150" data-height="100">
The flag of France is blue, white  and red. 
The code given draws only one of the three rectangles required and it is in the wrong place.<br/>
[[Image:flag_guide_france.png|border]]
<pre class=usr>
function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.fillRect(50,0,50,100);
}
</pre>
<pre class=ans>function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,0,50,100);
   ctx.fillStyle = 'white';
   ctx.fillStyle = 'white';
   ctx.fillRect(0,0,240,240);
   ctx.fillRect(50,0,50,100);
  ctx.fillStyle = 'red';
  ctx.fillRect(100,0,50,100);
}
 
</pre>
</div>
 
==Germany==
<div class=qu data-width=150 data-height=90>
The flag of Germany is black, red and yellow.
 
Only one of the three rectangles has been drawn - and that one is in the wrong place.<br/>
[[Image:flaggermany.png|border]] <pre class=usr>
function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,150,30);
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
   ctx.fillStyle = 'black';
   ctx.fillStyle = 'black';
   for(let y=0;y<12;y++){
   ctx.fillRect(0,0,150,30);
    for(let x=0;x<31;x++){
  ctx.fillStyle = 'red';
      if ((x+y)%2==1){
  ctx.fillRect(0,30,150,30);
        ctx.fillRect(240*x/24,240*y/12,240/24,240/12);
  ctx.fillStyle = 'yellow';
      }
  ctx.fillRect(0,60,150,30);
    }
}
  }
 
}
</pre>
</div>
 
==Switzerland==
<div class=qu width='100' height='100'
  className="Raster" level='1'>
The flag of Switzerland is red with a white cross in the center.
 
The background has been filled in. Use white rectangles to draw the cross.<br/>
[[Image:swissflag.png|border]] <pre class=usr>function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
}
</pre>
</pre>
<pre class='ans'>
<pre class=ans>
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
  ctx.fillStyle = 'white';
  ctx.fillRect(10,40,80,20);
  ctx.fillRect(40,10,20,80);
}
</pre></div>
 
==United Arab Emirates==
<div class=qu data-width='200' data-height='99'>
*The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
*The rectangle is 200 by 99.
[[Image:Flaguaeplain.png|border]]
<div class='dhint' title="How to draw a circle">
</div>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
   ctx.fillStyle = 'white';
   ctx.fillStyle = 'white';
   ctx.fillRect(0,0,240,240);
  ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'red';
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
   ctx.fillRect(0,0,50,99);
   ctx.fillStyle = 'black';
   ctx.fillStyle = 'black';
   let a = 0;
   ctx.fillRect(50,0,150,33);
   let w = 240/12;
   ctx.fillStyle = 'white';
   for(let x=0;x<31;x++){
   ctx.fillRect(50,33,150,33);
    for(let y=0;y<12;y++){
  ctx.fillStyle = 'green';
      if ((x+y)%2==1){
  ctx.fillRect(50,66,150,33);
        ctx.fillRect(a,240*y/12,w,240/12);
      }
    }
    a += w;
    if (x<16){
      w *= 0.9;
    }else{
      w *= 1/0.9;
    }
  }
}
}
</pre>
</pre>
</div>
</div>

Latest revision as of 21:33, 28 August 2023


You can dive right in and start programming - or you can watch this worked example: Flag of Benin

1) Libya

The flag of Libya, until 2011, was a simple green rectangle. Try the program as it is given, then change it so that the green rectangle is 150 wide.

Input


Output

function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,75,100);
}  
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,150,100);
}  

France

The flag of France is blue, white and red. The code given draws only one of the three rectangles required and it is in the wrong place.

function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.fillRect(50,0,50,100);
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'white';
  ctx.fillRect(50,0,50,100); 
  ctx.fillStyle = 'red';
  ctx.fillRect(100,0,50,100); 
}

Germany

The flag of Germany is black, red and yellow.

Only one of the three rectangles has been drawn - and that one is in the wrong place.

function drawFlag(ctx)
{
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,0,150,30);
} 
function drawFlag(ctx)
{
  ctx.fillStyle = 'black';
  ctx.fillRect(0,0,150,30);
  ctx.fillStyle = 'red';
  ctx.fillRect(0,30,150,30);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(0,60,150,30);
}

Switzerland

The flag of Switzerland is red with a white cross in the center.

The background has been filled in. Use white rectangles to draw the cross.

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,100,100);
  ctx.fillStyle = 'white';
  ctx.fillRect(10,40,80,20);
  ctx.fillRect(40,10,20,80);
}

United Arab Emirates

  • The flag of United Arab Emirates has a red bar taking one quarter of the rectangle.
  • The rectangle is 200 by 99.

function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'red';
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,50,99);
  ctx.fillStyle = 'black';
  ctx.fillRect(50,0,150,33);
  ctx.fillStyle = 'white';
  ctx.fillRect(50,33,150,33);
  ctx.fillStyle = 'green';
  ctx.fillRect(50,66,150,33);
}
Served by: dill at 2025-07-22T08:19

Navigation menu