Flags with Stars: Difference between revisions
		
		
		
		Jump to navigation
		Jump to search
		
| Line 26: | Line 26: | ||
[[Image:flagvietnam.png]]  | [[Image:flagvietnam.png]]  | ||
<pre class=usr>  | <pre class=usr>  | ||
function star(ctx)  | |||
{  | |||
  let p = [  | |||
    [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],  | |||
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]  | |||
  ];  | |||
  ctx.beginPath();  | |||
  for(let xy of p)  | |||
  {  | |||
    ctx.lineTo(xy[0],xy[1]);  | |||
  }  | |||
  ctx.fill();  | |||
}  | |||
function drawFlag(ctx)  | function drawFlag(ctx)  | ||
{  | {  | ||
  ctx.fillStyle = 'red';  | |||
  ctx.translate(50,50);  | |||
  ctx.fillStyle='yellow';  | |||
  star(ctx);  | |||
}  | }  | ||
</pre>  | </pre>  | ||
<pre class=ans>  | <pre class=ans>  | ||
function star(ctx)  | |||
{  | |||
  let p = [  | |||
    [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],  | |||
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]  | |||
  ];  | |||
  ctx.beginPath();  | |||
  for(let xy of p)  | |||
  {  | |||
    ctx.lineTo(xy[0],xy[1]);  | |||
  }  | |||
  ctx.fill();  | |||
}  | |||
function drawFlag(ctx)  | function drawFlag(ctx)  | ||
{  | {  | ||
  ctx.fillStyle = 'red';  | |||
  ctx.fillRect(0,0,200,150);  | |||
  ctx.translate(100,75);  | |||
  ctx.fillStyle='yellow';  | |||
  star(ctx);  | |||
}  | }  | ||
</pre>  | </pre>  | ||
Revision as of 18:26, 8 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)
{
  let p = [
    [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  ];
  ctx.beginPath();
  for(let xy of p)
  {
    ctx.lineTo(xy[0],xy[1]);
  }
  ctx.fill();
}
function drawFlag(ctx)
{
  ctx.fillStyle = 'red';
  ctx.translate(50,50);
  ctx.fillStyle='yellow';
  star(ctx);
}
function star(ctx)
{
  let p = [
    [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],
    [ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]
  ];
  ctx.beginPath();
  for(let xy of p)
  {
    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);
}



