Flags with Stars - Revision history

Andr3w at 10:06, 21 August 2021

2021-08-21T10:06:55Z

← Older revision		Revision as of 10:06, 21 August 2021
Line 1:		Line 1:
	~~{{flags~~-~~snippet}}~~		<pre id='shellbody' data-qtp='canvas'></pre>
	In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.		In these exercises you can use a function '''star''' which draws a five pointed star on the canvas.

Andr3w: /* Myanmar */

2021-08-16T20:05:44Z

Myanmar

← Older revision		Revision as of 20:05, 16 August 2021
Line 92:		Line 92:
	let r = 80*(Math.sqrt(5)-1)/Math.sqrt(5);		let r = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
	ctx.translate(90,64);		ctx.translate(90,64);
	ctx.scale(~~r/50~~,~~r/50~~);		ctx.scale(0.44,0.44);
	star(ctx);		star(ctx);
	}		}
Line 99:		Line 99:
	{		{
	ctx.beginPath();		ctx.beginPath();
	[ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	].forEach((xy) => ctx.lineTo(xy[0],xy[1]));		.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	}		}

Andr3w: /* Vietnam */

2021-08-16T20:03:43Z

Vietnam

← Older revision		Revision as of 20:03, 16 August 2021
Line 14:		Line 14:
	* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size		* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size

			Documentation:
	[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate translate]		[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate translate]
			[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale scale]

	[[Image:flagvietnam.png]]		[[Image:flagvietnam.png]]

Andr3w: /* Vietnam */

2021-08-16T20:02:08Z

Vietnam

← Older revision		Revision as of 20:02, 16 August 2021
Line 28:		Line 28:
	{		{
	ctx.beginPath();		ctx.beginPath();
	[ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	].forEach((xy) => ctx.lineTo(xy[0],xy[1]));		.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	}		}

Andr3w: /* Panama */

2021-08-16T18:50:26Z

Panama

← Older revision		Revision as of 18:50, 16 August 2021
Line 130:		Line 130:
	ctx.fillRect(120,0,120,80);		ctx.fillRect(120,0,120,80);
	ctx.translate(180,120);		ctx.translate(180,120);
			ctx.scale(0.25,0.25);
	star(ctx);		star(ctx);
			ctx.scale(4,4);
	ctx.translate(-180,-120);		ctx.translate(-180,-120);
	ctx.fillStyle = 'blue';		ctx.fillStyle = 'blue';
	ctx.fillRect(0,80,120,80);		ctx.fillRect(0,80,120,80);
	ctx.translate(60,40);		ctx.translate(60,40);
			ctx.scale(0.25,0.25);
	star(ctx);		star(ctx);
			ctx.scale(4,4);
	}		}

Line 141:		Line 145:
	{		{
	ctx.beginPath();		ctx.beginPath();
	[ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	].forEach((xy) => ctx.lineTo(xy[0],xy[1]));		.forEach(xy=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	}		}

Andr3w: /* Vietnam */

2021-08-16T18:47:04Z

Vietnam

← Older revision		Revision as of 18:47, 16 August 2021
Line 11:		Line 11:
	The function call '''start(ctx)''' will fill a star of radius 50 centred (0,0).		The function call '''start(ctx)''' will fill a star of radius 50 centred (0,0).

	* You can use the call '''ctx.translate(~~150~~,~~100~~)''' to move the star to the right place		* You can use the call '''ctx.translate(100,75)''' to move the star to the right place
	* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size		* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size

Andr3w: /* Myanmar */

2021-08-16T18:46:34Z

Myanmar

← Older revision		Revision as of 18:46, 16 August 2021
Line 72:		Line 72:
	{		{
	ctx.beginPath();		ctx.beginPath();
	[ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	].forEach((xy) => ctx.lineTo(xy[0],xy[1]));		.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	}		}

Andr3w: /* Vietnam */

2021-08-16T18:45:17Z

Vietnam

← Older revision		Revision as of 18:45, 16 August 2021
Line 50:		Line 50:
	[[0,-100],[22,-31],[95,-31],[36,12],[59,81],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	.forEach(xy=>ctx.lineTo(xy[0],xy[1]));		.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	}		}

Andr3w: /* Vietnam */

2021-08-16T18:44:28Z

Vietnam

← Older revision		Revision as of 18:44, 16 August 2021
Line 6:		Line 6:
	==Vietnam==		==Vietnam==
	<div class=qu data-width="200" data-height="150">		<div class=qu data-width="200" data-height="150">
	The flag of Vietnam has a yellow five pointed star on a red		The flag of Vietnam has a yellow five pointed star on a red.
	background~~. This star is a popular device on many flags, we define~~		background.
	~~the star once and use it many times in later flags~~.

	The ~~given~~ star ~~has a~~ radius of 50~~, it is~~ centred on 0,0		The function call '''start(ctx)''' will fill a star of radius 50 centred (0,0).
	~~which is the wrong place. We must translate to put it in the~~
	~~right place.~~
	~~We can use the [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate translate] method to move the star to the right location~~.

	~~The~~ translate ~~call is to the wrong location~~ (50,50) ~~- it should be at~~		* You can use the call '''ctx.translate(150,100)''' to move the star to the right place
	(~~100~~,75).		* You can use the call '''ctx.scale(0.5,0.5)''' to make the star the right size

			[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate translate]

	[[Image:flagvietnam.png]]		[[Image:flagvietnam.png]]
Line 43:		Line 41:
	ctx.translate(100,75);		ctx.translate(100,75);
	ctx.fillStyle='yellow';		ctx.fillStyle='yellow';
			ctx.scale(0.5,0.5);
	star(ctx);		star(ctx);
	}		}
Line 49:		Line 48:
	{		{
	ctx.beginPath();		ctx.beginPath();
	[ [ 0,-50],[11,-16],[48,-16],[18,6],[30,41],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[ 0,18],[-30,41],[-18,6],[-48,-16],[-11,-16]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	].forEach((xy) => ctx.lineTo(xy[0],xy[1]));		.forEach(xy=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	}		}

Andr3w: /* Myanmar */

2021-08-16T18:36:02Z

Myanmar

← Older revision		Revision as of 18:36, 16 August 2021
Line 62:		Line 62:
	* The centre of the star is (90,64)		* The centre of the star is (90,64)
	* The radius is of the star is 44		* The radius is of the star is 44
			* Colours are rgb(255,218,35) rgb(69,182,83) rgb(239,80,73) and white

	[[Image:flagmyanmar.png]]		[[Image:flagmyanmar.png]]
	<pre class=usr>		<pre class=usr>
Line 80:		Line 82:
	function drawFlag(ctx)		function drawFlag(ctx)
	{		{
			ctx.fillStyle = 'rgb(255,218,35)';
			ctx.fillRect(0,0,180,40);
			ctx.fillStyle = 'rgb(69,182,83)';
			ctx.fillRect(0,40,180,80);
			ctx.fillStyle = 'rgb(239,80,73)';
			ctx.fillRect(0,80,180,120);
			ctx.fillStyle = 'white';
			let r = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
			ctx.translate(90,64);
			ctx.scale(r/50,r/50);
			star(ctx);
	}		}