Flag EU: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| (7 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> | ||
== | == Flag of Europe (nearly) == | ||
<div class=qu data-width=150 data-height=100> | <div class=qu data-width=150 data-height=100> | ||
{{#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> | |||
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.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> | |||
</div> | |||
== Flag of Europe == | |||
<div class=qu data-width=150 data-height=100> | |||
[[Image:flagOfEurope.png|frame|Flag of Europe]] | |||
<pre class=usr> | <pre class=usr> | ||
function drawFlag(ctx){ | 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> | ||
<pre class=ans> | <pre class=ans> | ||
function drawFlag(ctx){ | 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(); | |||
} | } | ||
</pre> | </pre> | ||
</div> | </div> | ||
Latest revision as of 07:50, 21 August 2021
Flag of Europe (nearly)
{{#ev:youtube|yyWxBGbvAnA}}
- 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
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();
}