Difference between revisions of "Flags with Stars"

From ProgZoo
Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{flags-snippet}}
<pre id='shellbody' data-qtp='canvas'></pre>
In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.
In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.


Line 14: Line 14:
* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size
* 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/translate translate]
[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale scale]


[[Image:flagvietnam.png]]
[[Image:flagvietnam.png]]
Line 28: Line 30:
{
{
   ctx.beginPath();
   ctx.beginPath();
   [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
   [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
   ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
   .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
   ctx.fill();
   ctx.fill();
}
}
Line 90: Line 92:
   let r  = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
   let r  = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
   ctx.translate(90,64);
   ctx.translate(90,64);
   ctx.scale(r/50,r/50);
   ctx.scale(0.44,0.44);
   star(ctx);
   star(ctx);
}
}
Line 97: Line 99:
{
{
   ctx.beginPath();
   ctx.beginPath();
   [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
   [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
   ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
   .forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
   ctx.fill();
   ctx.fill();
}
}
Line 130: Line 132:
   ctx.fillRect(120,0,120,80);
   ctx.fillRect(120,0,120,80);
   ctx.translate(180,120);
   ctx.translate(180,120);
  ctx.scale(0.25,0.25);
   star(ctx);
   star(ctx);
  ctx.scale(4,4);
   ctx.translate(-180,-120);
   ctx.translate(-180,-120);
   ctx.fillStyle = 'blue';
   ctx.fillStyle = 'blue';
   ctx.fillRect(0,80,120,80);
   ctx.fillRect(0,80,120,80);
   ctx.translate(60,40);
   ctx.translate(60,40);
  ctx.scale(0.25,0.25);
   star(ctx);
   star(ctx);
  ctx.scale(4,4);
}
}


Line 141: Line 147:
{
{
   ctx.beginPath();
   ctx.beginPath();
   [ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
   [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
    [ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
  [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
   ].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
   .forEach(xy=>ctx.lineTo(xy[0],xy[1]));
   ctx.fill();
   ctx.fill();
}
}

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();
}