Прапор

Створення інтерактивного зображення

by oleksandr_s

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Слава Україні!</title>
</head>
<body>
	<p style="text-align: center;">
		<label>Вигляд: </label>
		<select id="typp">
			<option value="nothing"></option>
			<option value="state">Державний</option>
			<option value="national">Національний</option>
		</select>
		<input type="button" value="Побудувати" onclick="draw()">
	</p>
	<center><canvas id="canvas" width="800" height="400" style="background: lightgrey;"></canvas></center>
	<p id="motto" style="text-align: center; font-size: 50px; font-weight: bold;"></p>
	<script type="text/javascript" src="flags.js"></script>
</body>
</html>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function draw() {
	let typPrapora = document.getElementById('typp');
	let text = document.getElementById('motto');
	if (typPrapora.value == 'state') {
		ctx.beginPath();
		ctx.fillStyle = "blue";
		ctx.rect(250, 70, 300, 100);
		ctx.fill();
		ctx.stroke();

		ctx.beginPath();
		ctx.fillStyle = "yellow";
		ctx.rect(250, 170, 300, 100);
		ctx.fill();
		ctx.stroke();

		text.style.color = "blue";
		text.innerHTML = "Слава Україні!"
	}

	if (typPrapora.value == 'national') {
		ctx.beginPath();
		ctx.fillStyle = "red";
		ctx.rect(250, 70, 300, 100);
		ctx.fill();
		ctx.stroke();

		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.rect(250, 170, 300, 100);
		ctx.fill();
		ctx.stroke();

		text.style.color = "red";
		text.innerHTML = "Героям слава!"
	}

	if (typPrapora.value == 'nothing') {
		ctx.beginPath();
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.stroke();

		text.innerHTML = ""
	}
}