Difference between revisions of "Flag EU"

From ProgZoo
Jump to navigation Jump to search
 
(6 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>
== Not quite right==
== Flag of Europe (nearly) ==
<div class=qu data-width=150 data-height=100>
<div class=qu data-width=150 data-height=100>
[[Image:flagEurope.png|frame|Flag of Europe}}
{{#ev:youtube|yyWxBGbvAnA}}
[[Image:flagEuropeWrong.png|frame|Flag of Europe (almost)]]
* 150 by 100
* stars are in a circle radius 100/3
* each star is had radius 7
<pre class=usr>
<pre class=usr>
function drawFlag(ctx){
function drawFlag(ctx){
Line 41: Line 45:
     ctx.translate(0,50*2/3);
     ctx.translate(0,50*2/3);
     ctx.rotate(Math.PI/6);
     ctx.rotate(Math.PI/6);
  }
}
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>
</div>
== Flag of Europe ==
<div class=qu data-width=150 data-height=100>
[[Image:flagOfEurope.png|frame|Flag of Europe]]
<pre class=usr>
function drawFlag(ctx){
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,0,150,100);
  ctx.translate(75,50);
  ctx.fillStyle = 'gold';
  for(let i = 0;i<12; i++){
    ctx.translate(0,-50*2/3);
    ctx.scale(7/100,7/100);
    star(ctx);
    ctx.scale(100/7,100/7);
    ctx.translate(0,50*2/3);
    ctx.rotate(Math.PI/6);
  }
}
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 class=ans>
function drawFlag(ctx){
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,0,150,100);
  ctx.translate(75,50);
  ctx.fillStyle = 'gold';
  for(let i = 0;i<12; i++){
    ctx.rotate(i*Math.PI/6);
    ctx.translate(0,-50*2/3);
    ctx.scale(7/100,7/100);
    ctx.rotate(-i*Math.PI/6);
    star(ctx);
    ctx.rotate(i*Math.PI/6);
    ctx.scale(100/7,100/7);
    ctx.translate(0,50*2/3);
    ctx.rotate(-i*Math.PI/6);
   }
   }
}
}

Latest revision as of 07:50, 21 August 2021


Flag of Europe (nearly)

Flag of Europe (almost)
  • 150 by 100
  • stars are in a circle radius 100/3
  • each star is had radius 7
function drawFlag(ctx){
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,0,150,100);
  ctx.translate(75,50);
  ctx.fillStyle = 'gold';
  for(let i = 0;i<12; i++){
    ctx.translate(0,-50*2/3);
    ctx.scale(7/100,7/100);
    star(ctx);
    ctx.scale(100/7,100/7);
    ctx.translate(0,50*2/3);
    ctx.rotate(Math.PI/6);
  }
}

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 = 'blue';
  ctx.fillRect(0,0,150,100);
  ctx.translate(75,50);
  ctx.fillStyle = 'gold';
  for(let i = 0;i<12; i++){
    ctx.translate(0,-50*2/3);
    ctx.scale(7/100,7/100);
    star(ctx);
    ctx.scale(100/7,100/7);
    ctx.translate(0,50*2/3);
    ctx.rotate(Math.PI/6);
  }
}

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

Flag of Europe

Flag of Europe
function drawFlag(ctx){
  ctx.fillStyle = 'blue';
  ctx.fillRect(0,0,150,100);
  ctx.translate(75,50);
  ctx.fillStyle = 'gold';
  for(let i = 0;i<12; i++){
    ctx.translate(0,-50*2/3);
    ctx.scale(7/100,7/100);
    star(ctx);
    ctx.scale(100/7,100/7);
    ctx.translate(0,50*2/3);
    ctx.rotate(Math.PI/6);
  }
}

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 = 'blue';
  ctx.fillRect(0,0,150,100);
  ctx.translate(75,50);
  ctx.fillStyle = 'gold';
  for(let i = 0;i<12; i++){
    ctx.rotate(i*Math.PI/6);
    ctx.translate(0,-50*2/3);
    ctx.scale(7/100,7/100);
    ctx.rotate(-i*Math.PI/6);
    star(ctx);
    ctx.rotate(i*Math.PI/6);
    ctx.scale(100/7,100/7);
    ctx.translate(0,50*2/3);
    ctx.rotate(-i*Math.PI/6);
  }
}

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