Difference between revisions of "Flags with Stars"

From ProgZoo
Jump to navigation Jump to search
(Created page with "<pre id='shellbody'> <div style='background:silver;padding:5px'> <canvas id='usr' width=--snippet-w-- height=--snippet-h--></canvas> <canvas id='ans' width=--snippet-w-- heigh...")
 
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody'>
<pre id='shellbody' data-qtp='canvas'></pre>
<div style='background:silver;padding:5px'>
In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.
<canvas id='usr' width=--snippet-w-- height=--snippet-h--></canvas>
 
<canvas id='ans' width=--snippet-w-- height=--snippet-h-- style='display:none'></canvas>
You can control the position of the star by calling the '''transform''' method of ctx.
</div>
 
==Vietnam==
<div class=qu data-width="200" data-height="150">
The flag of Vietnam has a yellow five pointed star on a red.
background.
 
The function call '''start(ctx)''' will fill a star of radius 50 centred (0,0).
 
* You can use the call '''ctx.translate(100,75)''' to move the star to the right place
* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size
 
Documentation:
[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate translate]
[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale scale]
 
[[Image:flagvietnam.png]]
<pre class=usr>
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.translate(50,50);
  star(ctx);
}
 
function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
</pre>
</pre>
<pre class=ans>
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,200,150);
  ctx.translate(100,75);
  ctx.fillStyle='yellow';
  ctx.scale(0.5,0.5);
  star(ctx);
}


<pre id='shelljs'>
function star(ctx)
--snippet-usr--
{
drawFlag(document.getElementById('usr').getContext('2d'));
  ctx.beginPath();
(()=>{
   [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   --snippet-ans--
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  drawFlag(document.getElementById('ans').getContext('2d'));
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
})();
  ctx.fill();
let [a,b] = ['usr','ans']
}
    .map(id=>document.getElementById(id))
    .map(elem=>elem.getContext('2d').getImageData(0,0,elem.width,elem.height))
let diff = a.data.map((v,i) => v===b.data[i]?1:0).reduce((acc,v)=>acc+v,0)*100/a.data.length;
let fb = document.createElement('div');
fb.innerText = `Score: ${diff.toFixed(1)}`;
document.body.appendChild(fb);
fetch(`/reportProgress.php?uid=--snippet-uid--&qid=--snippet-qid--&score=${diff}`);
</pre>
</pre>
==Vietnam==
</div>
<div class=qu data-height="150" data-width="150">
 
[[Image:flagvietnam.png]]
==Myanmar==
<div class=qu data-width="180" data-height="120">
* 180 by 120
* The centre of the star is (90,64)
* The radius is of the star is 44
* Colours are rgb(255,218,35) rgb(69,182,83) rgb(239,80,73) and white
 
[[Image:flagmyanmar.png]]
<pre class=usr>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
}
function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
Line 33: Line 83:
function drawFlag(ctx)
function drawFlag(ctx)
{
{
  ctx.fillStyle = 'rgb(255,218,35)';
  ctx.fillRect(0,0,180,40);
  ctx.fillStyle = 'rgb(69,182,83)';
  ctx.fillRect(0,40,180,80);
  ctx.fillStyle = 'rgb(239,80,73)';
  ctx.fillRect(0,80,180,120);
  ctx.fillStyle = 'white';
  let r  = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
  ctx.translate(90,64);
  ctx.scale(0.44,0.44);
  star(ctx);
}
function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
Line 38: Line 108:


==Panama==
==Panama==
<div class=qu data-height="150" data-width="300" data-cols='40'>
<div class=qu data-width="240" data-height="160">
[[Image:flagpanama.png]]
[[Image:flagpanama.png]] These stars have a radius of 25.
<pre class=usr>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
}
function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
Line 48: Line 127:
function drawFlag(ctx)
function drawFlag(ctx)
{
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,160);
  ctx.fillStyle = 'red';
  ctx.fillRect(120,0,120,80);
  ctx.translate(180,120);
  ctx.scale(0.25,0.25);
  star(ctx);
  ctx.scale(4,4);
  ctx.translate(-180,-120);
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,80,120,80);
  ctx.translate(60,40);
  ctx.scale(0.25,0.25);
  star(ctx);
  ctx.scale(4,4);
}
function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
Line 53: Line 156:


==Bosnia and Herzegovina==
==Bosnia and Herzegovina==
<div class=qu data-width="300" data-height="150">
<div class=qu data-width="600" data-height="304">


[[Image:flagbhz.png|border]]
[[Image:flagbhz.png|border]]
The flag of Bosnia and Herzegovina includes 9 white stars. Each star is 38 right and 38 below the previous star.


<pre class=usr>
<pre class=usr>
function drawFlag(ctx)
function drawFlag(ctx)
{
{
}
function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
Line 65: Line 179:
function drawFlag(ctx)
function drawFlag(ctx)
{
{
  ctx.fillStyle='blue';
  ctx.fillRect(0,0,600,304);
  ctx.fillStyle='yellow';
  ctx.moveTo(160,0);
  ctx.lineTo(464,0);
  ctx.lineTo(464,304);
  ctx.fill();
  ctx.fillStyle='white';
  ctx.translate(105,0);
  for(let i=0;i<9;i++){
    star(ctx);
    ctx.translate(38,38);
  }
}
function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
Line 70: Line 206:


==Democratic Republic of Congo (formerly Zaire)==
==Democratic Republic of Congo (formerly Zaire)==
<div class=qu data-height="150" data-width="300">
<div class=qu data-width="500" data-height="300">
*The large star has a radius of 100
*The 6 smaller stars have a radius of 10.
*The background color is rgb: 173,216,230
*You can use [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale scale] to draw smaller stars
 
The are the points of a star radius 100:
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
 
[[Image:flagcongo.png]]
[[Image:flagcongo.png]]


Line 81: Line 226:
function drawFlag(ctx)
function drawFlag(ctx)
{
{
  ctx.fillStyle = 'rgb(173,216,230)';
  ctx.fillRect(0,0,500,300);
  ctx.fillStyle = 'yellow';
  ctx.translate(250,150);
  star(ctx);
  ctx.translate(-250,-150);
  ctx.translate(50,25);
  ctx.scale(0.1,0.1);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
}
function star(ctx){
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
}
</pre>
</pre>
</div>
</div>

Latest revision as of 10:06, 21 August 2021


In these exercises you can use a function star which draws a five pointed star on the canvas.

You can control the position of the star by calling the transform method of ctx.

Vietnam

The flag of Vietnam has a yellow five pointed star on a red. background.

The function call start(ctx) will fill a star of radius 50 centred (0,0).

  • You can use the call ctx.translate(100,75) to move the star to the right place
  • You can use the call ctx.scale(0.5,0.5) to make the star the right size

Documentation: translate scale

Flagvietnam.png

function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.translate(50,50);
  star(ctx);
}

function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.fillRect(0,0,200,150);
  ctx.translate(100,75);
  ctx.fillStyle='yellow';
  ctx.scale(0.5,0.5);
  star(ctx);
}

function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

Myanmar

  • 180 by 120
  • The centre of the star is (90,64)
  • The radius is of the star is 44
  • Colours are rgb(255,218,35) rgb(69,182,83) rgb(239,80,73) and white

Flagmyanmar.png

function drawFlag(ctx)
{
}

function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(255,218,35)';
  ctx.fillRect(0,0,180,40);
  ctx.fillStyle = 'rgb(69,182,83)';
  ctx.fillRect(0,40,180,80);
  ctx.fillStyle = 'rgb(239,80,73)';
  ctx.fillRect(0,80,180,120);
  ctx.fillStyle = 'white';
  let r  = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
  ctx.translate(90,64);
  ctx.scale(0.44,0.44);
  star(ctx);
}

function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

Panama

Flagpanama.png These stars have a radius of 25.

function drawFlag(ctx)
{
}

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'white';
  ctx.fillRect(0,0,240,160);
  ctx.fillStyle = 'red';
  ctx.fillRect(120,0,120,80);
  ctx.translate(180,120);
  ctx.scale(0.25,0.25);
  star(ctx);
  ctx.scale(4,4);
  ctx.translate(-180,-120);
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,80,120,80);
  ctx.translate(60,40);
  ctx.scale(0.25,0.25);
  star(ctx);
  ctx.scale(4,4);
}

function star(ctx)
{
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

Bosnia and Herzegovina

Flagbhz.png

The flag of Bosnia and Herzegovina includes 9 white stars. Each star is 38 right and 38 below the previous star.

function drawFlag(ctx)
{
}

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}
function drawFlag(ctx)
{
  ctx.fillStyle='blue';
  ctx.fillRect(0,0,600,304);
  ctx.fillStyle='yellow';
  ctx.moveTo(160,0);
  ctx.lineTo(464,0);
  ctx.lineTo(464,304);
  ctx.fill();
  ctx.fillStyle='white';
  ctx.translate(105,0);
  for(let i=0;i<9;i++){
    star(ctx);
    ctx.translate(38,38);
  }
}

function star(ctx)
{
  ctx.beginPath();
  [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}

Democratic Republic of Congo (formerly Zaire)

  • The large star has a radius of 100
  • The 6 smaller stars have a radius of 10.
  • The background color is rgb: 173,216,230
  • You can use scale to draw smaller stars

The are the points of a star radius 100:

 [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]

Flagcongo.png

function drawFlag(ctx)
{
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'rgb(173,216,230)';
  ctx.fillRect(0,0,500,300);
  ctx.fillStyle = 'yellow';
  ctx.translate(250,150);
  star(ctx);
  ctx.translate(-250,-150);
  ctx.translate(50,25);
  ctx.scale(0.1,0.1);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
  ctx.translate(0,500);
  star(ctx);
}

function star(ctx){
  ctx.beginPath();
  [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
   [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
  .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
  ctx.fill();
}