Canvas bilan tanishuv
Canvas’ni o‘rganing
HTML <canvas> elementi veb-sahifada grafika chizish uchun ishlatiladi.
HTML <canvas> elementi faqat grafika uchun konteyner hisoblanadi. Grafikani haqiqatda chizish uchun skriptdan foydalanishingiz kerak.
Canvas’da yo‘llar (path), to‘rtburchaklar, aylanalar, matn chizish va rasm qo‘shish uchun bir nechta metod mavjud.
Canvas barcha asosiy brauzerlarda qo‘llab-quvvatlanadi.
HTML Canvas misoli
Yuqoridagi grafika <canvas> yordamida yaratilgan. U to‘rtta obyektdan iborat: qizil to‘rtburchak, gradientli to‘rtburchak, ko‘p rangli to‘rtburchak va ko‘p rangli matn.
Oldindan nimalarni bilishingiz kerak
Davom etishdan oldin quyidagilar haqida boshlang‘ich tushunchaga ega bo‘lishingiz kerak:
- HTML
- JavaScript asoslari
Agar avval shu mavzularni o‘rganmoqchi bo‘lsangiz, tegishli darsliklarni Bosh sahifamizda topasiz.
HTML Canvas nima?
HTML <canvas> elementi skript (odatda JavaScript) yordamida grafikani dinamik chizish uchun ishlatiladi.
<canvas> elementi faqat grafika uchun konteyner hisoblanadi. Grafikani haqiqatda chizish uchun skriptdan foydalanishingiz kerak.
Canvas’da yo‘llar (path), to‘rtburchaklar, aylanalar, matn chizish va rasm qo‘shish uchun bir nechta metod mavjud.
HTML Canvas matn chiza oladi
Canvas animatsiyali yoki animatsiyasiz rang-barang matn chiza oladi.
HTML Canvas grafika chiza oladi
Canvas grafiklar va diagrammalar ko‘rinishida ma’lumotlarni grafik tasvirlash uchun ajoyib imkoniyatlarga ega.
HTML Canvas’ni animatsiya qilish mumkin
Canvas obyektlari harakatlana oladi. Hamma narsa mumkin: oddiy sakrovchi to‘plardan tortib murakkab animatsiyalargacha.
HTML Canvas interaktiv bo‘lishi mumkin
Canvas JavaScript hodisalariga (events) javob bera oladi.
Canvas foydalanuvchining istalgan harakatiga (klavishlarni bosish, sichqoncha bilan bosish, tugmalarni bosish, barmoq harakati) javob bera oladi.
HTML Canvas’dan o‘yinlarda foydalanish mumkin
Canvas’ning animatsiya metodlari HTML o‘yin ilovalari uchun juda ko‘p imkoniyatlar yaratadi.
Canvas misoli
HTML’da <canvas> elementi quyidagicha ko‘rinadi:
<canvas id="myCanvas" width="200" height="100"></canvas>
id atributi majburiy (JavaScript unga murojaat qila olishi uchun).
width va
height atributlari canvas o‘lchamini belgilaydi.
Maslahat: Canvas’ning standart o‘lchami 300px (kenglik) x 150px (balandlik).
Maslahat: Bitta HTML sahifada bir nechta <canvas> elementi bo‘lishi mumkin.
Standart holatda <canvas> elementining chegarasi ham, mazmuni ham bo‘lmaydi.
Chegara qo‘shish uchun style atributidan foydalaning:
Misol
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
O‘zingiz sinab ko‘ring »
Keyingi boblarda canvas’da qanday chizish ko‘rsatiladi.
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!