Difference between revisions of "Flags with Polygons"
Jump to navigation
Jump to search
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<pre id='shellbody' data-qtp='canvas'></pre> | |||
You can dive into the code, or you can watch these worked examples [[Flags of Russia]] | |||
==Napier== | ==Napier== | ||
<div class=qu data-height="150" data-width="150"> | <div class=qu data-height="150" data-width="150"> | ||
Line 134: | Line 135: | ||
==Seychelles== | ==Seychelles== | ||
<div class=qu data-height="150" data-width="300"> | <div class=qu data-height="150" data-width="300"> | ||
[[Image:flagseychelles.png]] | [[Image:flagseychelles.png|left|frame|Flag of Seychelles]] | ||
<pre class=usr> | <pre class=usr> |
Latest revision as of 15:06, 20 August 2021
You can dive into the code, or you can watch these worked examples Flags of Russia
Napier
function drawFlag(ctx) { ctx.fillStyle = 'white'; ctx.fillRect(0,0,150,150); ctx.fillStyle = 'red'; ctx.moveTo(0,0); ctx.lineTo(150,0); ctx.lineTo(150,150); ctx.fill(); }
function drawFlag(ctx) { ctx.fillStyle = 'white'; ctx.fillRect(0,0,150,150); ctx.moveTo(0,0); ctx.lineTo(150,150); ctx.lineTo(0,150); ctx.fillStyle = "red"; ctx.fill(); }
The Czech Republic
- 300 by 200
- The point of intersection is the centre of the rectangle
function drawFlag(ctx) { }
function drawFlag(ctx) { ctx.fillStyle = 'blue'; ctx.moveTo(0,0); ctx.lineTo(150,100); ctx.lineTo(0,200); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'white'; ctx.moveTo(0,0); ctx.lineTo(150,100); ctx.lineTo(300,100); ctx.lineTo(300,0); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'red'; ctx.moveTo(0,200); ctx.lineTo(150,100); ctx.lineTo(300,100); ctx.lineTo(300,200); ctx.fill(); }
The Bahamas
function drawFlag(ctx) { }
function drawFlag(ctx) { ctx.fillStyle = 'rgb(127,192,255)'; ctx.fillRect(0,0,300,150); ctx.fillStyle = 'rgb(255,255,0)'; ctx.fillRect(0,50,300,50); ctx.fillStyle = 'black'; ctx.moveTo(0,0); ctx.lineTo(112,75); ctx.lineTo(0,150); ctx.fill(); }
Jamaica
function drawFlag(ctx) { ctx.fillStyle = 'yellow'; ctx.fillRect(0,0,300,150); }
function drawFlag(ctx) { ctx.fillStyle = 'yellow'; ctx.fillRect(0,0,300,150); ctx.fillStyle = 'green'; ctx.moveTo(30,0); ctx.lineTo(150,60); ctx.lineTo(270,0); ctx.fill(); ctx.moveTo(30,150); ctx.lineTo(150,90); ctx.lineTo(270,150); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'black'; ctx.moveTo(0,15); ctx.lineTo(120,75); ctx.lineTo(0,135); ctx.fill(); ctx.moveTo(300,15); ctx.lineTo(180,75); ctx.lineTo(300,135); ctx.fill(); }
Seychelles
function drawFlag(ctx) { }
function drawFlag(ctx) { ctx.fillStyle = 'blue'; ctx.moveTo(0,150); ctx.lineTo(0,0); ctx.lineTo(100,0); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'yellow'; ctx.moveTo(0,150); ctx.lineTo(100,0); ctx.lineTo(200,0); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'red'; ctx.moveTo(0,150); ctx.lineTo(200,0); ctx.lineTo(300,0); ctx.lineTo(300,50); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'white'; ctx.moveTo(0,150); ctx.lineTo(300,50); ctx.lineTo(300,100); ctx.fill(); ctx.beginPath(); ctx.fillStyle = 'green'; ctx.moveTo(0,150); ctx.lineTo(300,150); ctx.lineTo(300,100); ctx.fill(); }