Difference between revisions of "Flags with Stars"
Jump to navigation
Jump to search
(→Panama) |
|||
Line 64: | Line 64: | ||
==Panama== | ==Panama== | ||
<div class=qu data- | <div class=qu data-width="240" data-height="160"> | ||
[[Image:flagpanama.png]] | [[Image:flagpanama.png]] | ||
<pre class=usr> | <pre class=usr> | ||
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) | function drawFlag(ctx) | ||
{ | { | ||
Line 72: | Line 80: | ||
</pre> | </pre> | ||
<pre class=ans> | <pre class=ans> | ||
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) | 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); | |||
star(ctx); | |||
ctx.translate(-180,-120); | |||
ctx.fillStyle = 'blue'; | |||
ctx.fillRect(0,80,120,80); | |||
ctx.translate(60,40); | |||
star(ctx); | |||
} | } | ||
</pre> | </pre> |
Revision as of 13:41, 9 August 2021
<div style='background:silver;padding:5px'> <canvas id='usr' width=--snippet-w-- height=--snippet-h--></canvas> <canvas id='ans' width=--snippet-w-- height=--snippet-h-- style='display:none'></canvas> </div>
--snippet-usr-- drawFlag(document.getElementById('usr').getContext('2d')); (()=>{ --snippet-ans-- drawFlag(document.getElementById('ans').getContext('2d')); })(); 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}`);
Vietnam
function star(ctx) { ctx.beginPath(); [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41], [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16] ].forEach((xy) => ctx.lineTo(xy[0],xy[1])); ctx.fill(); } function drawFlag(ctx) { ctx.fillStyle = 'red'; ctx.translate(50,50); star(ctx); }
function star(ctx) { ctx.beginPath(); [ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41], [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16] ].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'; star(ctx); }
Panama
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) { }
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); star(ctx); ctx.translate(-180,-120); ctx.fillStyle = 'blue'; ctx.fillRect(0,80,120,80); ctx.translate(60,40); star(ctx); }