HTML5 canvas va javascript yordamida bayroq chizish va harakatlantirish.

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

	
		
	
	
		Browseringiz eskirgan
		
	

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.

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.

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