Difference between revisions of "Flags with Rectangles"
Jump to navigation
Jump to search
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<pre id='shellbody' data-qtp='canvas'></pre> | |||
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] | |||
==Libya== | ==Libya== | ||
<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 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. | Try the program as it is given, then change it so that the green rectangle is 150 wide. | ||
[[Image:flaglibya.png|border]] | [[Image:flaglibya.png|border]] | ||
<pre class='usr'> | <pre class='usr'> | ||
| Line 25: | Line 27: | ||
==France== | ==France== | ||
<div class=qu | <div class=qu data-width="150" data-height="100"> | ||
The flag of France is blue, white and red. | 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/> | The code given draws only one of the three rectangles required and it is in the wrong place.<br/> | ||
| Line 50: | Line 52: | ||
==Germany== | ==Germany== | ||
<div class=qu | <div class=qu data-width=150 data-height=90> | ||
The flag of Germany is black, red and yellow. | The flag of Germany is black, red and yellow. | ||
| Line 76: | Line 78: | ||
==Switzerland== | ==Switzerland== | ||
<div class=qu | <div class=qu width='100' height='100' | ||
className="Raster" level='1'> | className="Raster" level='1'> | ||
The flag of Switzerland is red with a white cross in the center. | The flag of Switzerland is red with a white cross in the center. | ||
| Line 99: | Line 101: | ||
==United Arab Emirates== | ==United Arab Emirates== | ||
<div class=qu | <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 flag of United Arab Emirates has a red bar taking one quarter of the rectangle. | ||
*The rectangle is 200 by 99. | *The rectangle is 200 by 99. | ||
Revision as of 06:52, 12 September 2021
You can dive right in and start programming - or you can watch this worked example: Flag of Benin
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.
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);
}