Difference between revisions of "Flags: Worked Examples"
Jump to navigation
Jump to search
| (39 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 | * The flag is 150 by 100 | ||
* The green rectangle is 50 by 100 | |||
* 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, | 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> | ||
| Line 20: | Line 28: | ||
{ | { | ||
ctx.fillStyle = 'green'; | ctx.fillStyle = 'green'; | ||
ctx.fillRect(0,0, | 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> | ||
</div> | </div> | ||
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);
}