HTML Canvas ma’lumotnomasi
<canvas> elementi HTML sahifasida bitmapped hudud belgilaydi.
Canvas API JavaScript’ga canvas’da grafika chizish imkonini beradi.
Canvas API shakllar, chiziqlar, egri chiziqlar, to‘rtburchaklar, matn va tasvirlarni ranglar, aylanishlar, shaffofliklar va boshqa piksel manipulyatsiyalari bilan chizishi mumkin.
HTML sahifasining istalgan joyiga
<canvas> tegi bilan canvas elementi qo‘shishingiz mumkin:
<canvas> elementiga HTML
DOM metodi getElementById() orqali murojaat qilishingiz mumkin.
Canvas’da chizish uchun 2D context obyektini yaratishingiz kerak:
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
Eslatma
HTML <canvas> elementining o‘zida chizish qobiliyati yo‘q.
Har qanday grafikani chizish uchun JavaScript’dan foydalanishingiz kerak.
getContext() metodi chizish uchun vositalar (metodlar) bilan
obyekt qaytaradi.
Canvas’ga chizish
2D kontekst yaratilgandan so‘ng, canvas’da chizishingiz mumkin.
fillRect() metodi yuqori chap burchagi 20,20 pozitsiyasida joylashgan qora to‘rtburchak chizadi. To‘rtburchak 150 piksel kenglikda va 100 piksel balandlikda.
Misol
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Ranglardan foydalanish
fillStyle xususiyati chizma obyektining to‘ldirish rangini belgilaydi:
Misol
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Shuningdek, document.createElement() metodi bilan yangi <canvas> elementi yaratab,
uni mavjud HTML sahifasiga qo‘shishingiz mumkin:
Misol
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
O‘zingiz sinab ko‘ring »
Paths
Canvasda chizishning odatiy usuli quyidagicha:
- Path boshlash - beginPath()
- Nuqtaga o‘tish - moveTo()
- Path ichida chizish - lineTo()
- Path chizish - stroke()
Misol
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
O‘zingiz sinab ko‘ring »
Canvas API bo‘yicha to‘liq ma’lumotnoma
Ushbu ma’lumotnoma canvas’da matn, chiziqlar, to‘rtburchaklar, doiralar, rasmlar va boshqalarni chizish uchun ishlatiladigan getContext("2d") Obyektining barcha Xususiyatlari va Metodlarini qamrab oladi.
Chizish metodlari
Canvas’da to‘g‘ridan-to‘g‘ri chizish uchun atigi 3 ta metod mavjud:
| Metod | Tavsif |
|---|---|
| fillRect() | "To‘ldirilgan" to‘rtburchak chizadi |
| strokeRect() | To‘rtburchak chizadi (to‘ldirmasdan) |
| clearRect() | To‘rtburchak ichidagi belgilangan piksellarni tozalaydi |
Yo‘l (path) metodlari
| Metod | Tavsif |
|---|---|
| beginPath() | Yangi yo‘l (path) boshlaydi yoki joriy yo‘lni qayta o‘rnatadi |
| closePath() | Joriy nuqtadan boshigacha bo‘lgan yo‘lga chiziq qo‘shadi |
| isPointInPath() | Belgilangan nuqta joriy yo‘lda bo‘lsa, true qiymatini qaytaradi |
| moveTo() | Yo‘lni canvas’dagi nuqtaga ko‘chiradi (chizmasdan) |
| lineTo() | Yo‘lga chiziq qo‘shadi |
| fill() | Joriy yo‘lni to‘ldiradi |
| rect() | Yo‘lga to‘rtburchak qo‘shadi |
| stroke() | Joriy yo‘lni chizadi |
| Aylanalar va egri chiziqlar | |
| bezierCurveTo() | Yo‘lga kubik Bezier egri chizig‘ini qo‘shadi |
| arc() | Yo‘lga yoy/egri chiziq (aylana yoki aylana qismlari) qo‘shadi |
| arcTo() | Yo‘lga ikkita tangens orasiga yoy/egri chiziq qo‘shadi |
| quadraticCurveTo() | Yo‘lga kvadratik Bezier egri chizig‘ini qo‘shadi |
Text
| Method/Prop | Tavsif |
|---|---|
| direction | Matn chizish uchun ishlatiladigan yo‘nalishni o‘rnatadi yoki qaytaradi |
| fillText() | Canvas’ga "to‘ldirilgan" matn chizadi |
| font | Matn tarkibi uchun shrift xususiyatlarini o‘rnatadi yoki qaytaradi |
| measureText() | Belgilangan matnning kengligini o‘z ichiga olgan obyektni qaytaradi |
| strokeText() | Canvas’ga matn chizadi |
| textAlign | Matn mazmuni uchun tekislashni o‘rnatadi yoki qaytaradi |
| textBaseline | Matn chizishda ishlatiladigan matnning asosiy chizig‘ini o‘rnatadi yoki qaytaradi |
Ranglar, uslublar va soyalar
| Method/Property | Tavsif |
|---|---|
| addColorStop() | Gradient obyektidagi ranglar va to‘xtash joylarini belgilaydi |
| createLinearGradient() | Chiziqli gradient yaratadi (canvas kontentida ishlatish uchun) |
| createPattern() | Belgilangan elementni belgilangan yo‘nalishda takrorlaydi |
| createRadialGradient() | Radial/aylanma gradient yaratadi (canvas kontentida ishlatish uchun) |
| fillStyle | Chizmani to‘ldirish uchun ishlatiladigan rang, gradient yoki naqshni o‘rnatadi yoki qaytaradi |
| lineCap | Chiziq uchun so‘nggi qopqoqlar uslubini o‘rnatadi yoki qaytaradi |
| lineJoin | Ikki chiziq uchrashganda yaratilgan burchak turini o‘rnatadi yoki qaytaradi |
| lineWidth | Joriy chiziq kengligini o‘rnatadi yoki qaytaradi |
| miterLimit | Maksimal miter uzunligini o‘rnatadi yoki qaytaradi |
| shadowBlur | Soyalar uchun xiralik darajasini o‘rnatadi yoki qaytaradi |
| shadowColor | Soyalar uchun ishlatiladigan rangni o‘rnatadi yoki qaytaradi |
| shadowOffsetX | Shakldan soyaning gorizontal masofasini o‘rnatadi yoki qaytaradi |
| shadowOffsetY | Shakldan soyaning vertikal masofasini o‘rnatadi yoki qaytaradi |
| strokeStyle | Chiziqlar uchun ishlatiladigan rang, gradient yoki naqshni o‘rnatadi yoki qaytaradi |
Transformations
| Metod | Tavsif |
|---|---|
| scale() | Joriy chizmani kattalashtiradi yoki kichiklashtiradi |
| rotate() | Joriy chizmani aylantiradi |
| translate() | Canvas’dagi (0,0) nuqtasini boshqa joyga ko‘chiradi |
| transform() | Chizma uchun joriy transformatsiya matritsasini almashtiradi |
| setTransform() | Joriy transformatsiyani birlik matritsaga qaytaradi. So‘ngra transform()’ni ishga tushiradi |
Rasm chizish
| Metod | Tavsif |
|---|---|
| drawImage() | Tuvalga rasm, kanvas yoki video chizadi |
ImageData obyekti / Piksellar bilan ishlash
| Method/Property | Tavsif |
|---|---|
| createImageData() | Yangi, bo‘sh ImageData obyektini yaratadi |
| getImageData() | Tuvaldagi ko‘rsatilgan to‘rtburchak uchun piksel ma’lumotlarini nusxalaydigan ImageData obyektini qaytaradi |
| ImageData.data | Belgilangan ImageData obyektining tasvir ma’lumotlarini o‘z ichiga olgan obyektni qaytaradi |
| ImageData.height | ImageData obyektining balandligini qaytaradi |
| ImageData.width | ImageData obyektining kengligini qaytaradi |
| putImageData() | Rasm ma’lumotlarini (belgilangan ImageData obyektidan) canvas’ga qaytarib joylaydi |
Compositing
| Xususiyat | Tavsif |
|---|---|
| globalAlpha | Chizmaning joriy alfa yoki shaffoflik qiymatini o‘rnatadi yoki qaytaradi |
| globalCompositeOperation | Mavjud rasmga yangi rasm qanday chizilganligini belgilaydi yoki qaytaradi |
Boshqa metodlar
| Metod | Tavsif |
|---|---|
| clip() | Asl tuvaldan istalgan shakl va o‘lchamdagi hududni qirqadi |
| save() | Joriy chizma kontekstining holatini va uning barcha atributlarini saqlaydi |
| restore() | Oldin saqlangan holat va atributlarni tiklaydi |
| createEvent() | |
| getContext() | |
| toDataURL() |
Standart xossalar va hodisalar
Canvas obyekti shuningdek standart xususiyatlar va hodisalarni qo‘llab-quvvatlaydi.
Tegishli sahifalar
Canvas darsi: Canvas Tutorial
HTML darsligi: HTML5 Canvas
HTML ma’lumotnomasi: HTML <canvas> tegi
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standarti (2014) hisoblanadi.
Canvas API barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!