Difference between revisions of "Flags: Worked Examples"

From ProgZoo
Jump to navigation Jump to search
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody' data-qtp='canvas'></pre>
<pre id='shellbody' data-qtp='canvas'></pre>
Video from Panopto:
*[https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=40d77c01-abda-4333-805a-ad8800e8f121 Benin Walk-through]


==Benin==
==Benin==
 
{{#ev:youtube|JsZafc6Y7xQ}}
<div class='qu' data-width="150" data-height="100">
<div class='qu' data-width="150" data-height="100">
The flag of Libya, until 2011, was a simple green rectangle.
* The flag is 150 by 100
 
* The green rectangle is 50 by 100
Try the program as it is given, then change it so that the green rectangle is 150 wide.
* The yellow and red rectangles are 100 by 50


[[Image:flagbenin.png|border]]
[[Image:flagbenin.png|border|frame|Flag of Benin]]
<pre class='usr'>
<pre class='usr'>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
   ctx.fillStyle = 'green';
   ctx.fillStyle = 'green';
   ctx.fillRect(0,0,75,100);
   ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}   
}   
</pre>
</pre>

Latest revision as of 17:32, 4 September 2021


Video from Panopto:

Benin

  • The flag is 150 by 100
  • The green rectangle is 50 by 100
  • The yellow and red rectangles are 100 by 50


Flag of Benin
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}  
function drawFlag(ctx)
{
  ctx.fillStyle = 'green';
  ctx.fillRect(0,0,50,100);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(50,0,100,50);
  ctx.fillStyle = 'red';
  ctx.fillRect(50,50,100,50);
}