HTML <canvas>

<canvas> — sahifada JavaScript yordamida grafika chizish uchun mo’ljallangan teg. Chiziqlar, shakllar, rasmlar, animatsiyalar va hatto o’yinlar aynan <canvas> ustida yaratiladi. U bo’sh “tuval” bo’lib, unga chizish JavaScript orqali amalga oshiriladi.

<canvas> — piksel darajasida grafika chizish uchun mo’ljallangan HTML5 tegi. O’zi bo’sh maydon beradi, chizish esa JavaScript orqali bajariladi.

Canvas yaratish

<canvas> tegiga o’lcham (width, height) va odatda id beriladi:

<canvas id="tuval" width="200" height="100"></canvas>

[200x100 o'lchamli bo'sh chizish maydoni]

Bu o’z-o’zidan bo’sh, ko’rinmas maydon yaratadi. id — JavaScript unga murojaat qilishi uchun, width va height esa maydon o’lchamini belgilaydi.

JavaScript bilan chizish

Canvas ustiga chizish uchun JavaScript “kontekst” olinadi va shakllar chiziladi:

<canvas id="tuval" width="200" height="100"></canvas>
<script>
    const c = document.getElementById("tuval");
    const ctx = c.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(20, 20, 150, 60);
</script>

[Ko'k rangli to'rtburchak chizildi]

getContext("2d") — ikki o’lchamli chizish vositasini oldi, fillRect(x, y, kenglik, balandlik) esa to’rtburchak chizdi. Canvas’da har bir shakl aynan shunday — kod orqali chiziladi.

Canvas imkoniyatlari

<canvas> juda ko’p turdagi grafikani qo’llab-quvvatlaydi. Asosiylarini jadvalda ko’ramiz:

Qayerda ishlatiladi?

<canvas> — kuchli, ammo murakkab vosita. U o’yinlar, diagrammalar (grafik ko’rsatkichlar), rasm muharrirlari va murakkab animatsiyalarda ishlatiladi. Oddiy shakllar uchun ko’pincha CSS yoki SVG yetarli; <canvas> esa piksel darajasida to’liq nazorat kerak bo’lganda tanlanadi. Uni to’liq o’zlashtirish uchun JavaScript’ni yaxshi bilish talab qilinadi.

Xulosa

Bu bo’limda <canvas> tegini, uni JavaScript bilan chizishni (getContext, fillRect) va qo’llanish sohalarini ko’rib chiqdik. <canvas> — veb-grafikaning kuchli tuvali. Keyingi darsda <caption> tegiga o’tamiz.