HTML5 canvas va javascript yordamida bayroq chizish va harakatlantirish.

Web dasturlash

Salom. Mana ancha vaqtdan keyin HTML5 canvas haqida yozishga qaror qildim. Ushbu maqolada canvas haqidagi dastlabki ma'lumotlar keltirilgan. Misol sifatida yurtimiz bayrog'ini chizdim.

CANVAS — bu HTML5 dagi 2d grafika bilan ishlaydigan tegidir. Ushbu elementdan foydalanib siz hohlagan narsangizni chizsangiz bo'ladi. Faqat sizdan sabr talab qilinadi holos.
Misol uchun: mudcu.be/sketchpad/

Keling gapni ko'p cho'zmaylikda ishga o'taylik. Avvalo bitta HTML fayl yarating va unga

<!DOCTYPE html>
<html>
	<head>
		<title>Flag Uzbekistan</title>
	</head>
	<body>
		<canvas width="600" height="400" id='flag'>Browseringiz eskirgan</canvas>
		<script type="text/javascript">
		//JS kod
		</script>
	</body>
</html>

ni yozing. Natijada hech nima chiqmasligi kerak. Keling endi shu canvas ga JS yordamida bayrog'imizni chizamiz. Buning uchun CANVAS dan keyin quyidagi JS kodni qo'shing.

<script type="text/javascript">
(function(){
	var elm = document.getElementById("flag");
	var ctx = elm.getContext("2d");
	ctx.fillStyle = "#0000FF";
	ctx.fillRect(0, 0, elm.width, 120);
	
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0, 120, elm.width, 20);
	ctx.fillRect(0, 260, elm.width, 20);
	
	ctx.fillStyle = "#FFFFFF";
	ctx.fillRect(0, 140, elm.width, 120);
	
	ctx.fillStyle = "#00FF00";
	ctx.fillRect(0, 280, elm.width, 120);
})();
</script>

getContext — canvas elementining chizishga mo'ljallangan elementini olish
fillStyle — chizilayotgan obyektning ichki sohasi rangi (bo'yalish rangi)
fillRect — to'rtburchak chizish.

Agar JS ni qo'shib natijani ko'rsangiz o'zimizning bayrog'imizni oy va yulduzlarsiz ko'rasiz.

Umuman olganda qisqacha shu lekin buning bilan maqolamni yakunlamoqchimasman. Keling endi shu bayrog'imizga jon bersak ya'ni harakatlantirsak.

Oxirgi natijamiz esa quyidagi ko'rinishda bo'ladi.

<script type="text/javascript">
(function(){
	var elm = document.getElementById("flag");
	var ctx = elm.getContext("2d");
	var blocks = 200;
	var counter = 0;
	
	function draw(x, y, w) {
		y += 100;
		ctx.fillStyle = "#0000FF";
		ctx.fillRect(x, y, w, 120);
		
		ctx.fillStyle = "#FF0000";
		ctx.fillRect(x, y + 120, w, 20);
		ctx.fillRect(x, y + 260, w, 20);
		
		ctx.fillStyle = "#FFFFFF";
		ctx.fillRect(x, y + 140, w, 120);
		
		ctx.fillStyle = "#00FF00";
		ctx.fillRect(x, y + 280, w, 120);
	}
	
	setInterval(function(){
		var c = 0;
		ctx.clearRect(0, 0, elm.width, elm.height);
		var w = elm.width / blocks;
		for(var x = 0; x <= elm.width; x += w)
		{
			var y = -50 * Math.sin(counter + c);
			draw(x, y, w);
			c += Math.PI / 100;
		}
		counter += Math.PI / 100;
	}, 10);
})();
</script>

Kodga e'tibor berib qarasangiz tepadagidan ozgina farq qiladi holos. Ya'ni bayroqlarni bo'laklab chizadigan qilingan draw funksiyasi setInterval dagi funksiya esa oddiy matematika.

Natija: flag.html