<canvas>
<canvas> elementi HTML sahifada rastrli (bitmap) maydonni belgilaydi.
Canvas API JavaScript’ga canvas’da grafika chizish imkonini beradi.
Canvas API shakllar, chiziqlar, egri chiziqlar, to‘rtburchaklar, matn va rasmlarni ranglar, aylantirishlar, shaffoflik va boshqa piksel amallari bilan chiza oladi.
HTML’ga Canvas qo‘shish
Canvas elementini HTML sahifaning istalgan joyiga
<canvas> tegi yordamida qo‘shishingiz mumkin:
Canvas elementiga qanday murojaat qilish mumkin
<canvas> elementiga HTML DOM metodi getElementById() yordamida murojaat qilishingiz mumkin:
const myCanvas = document.getElementById("myCanvas");
Canvas’da chizish uchun 2D kontekst obyektini yaratishingiz kerak:
const ctx = myCanvas.getContext("2d");
Eslatma
HTML <canvas> elementining o‘zi chizish imkoniyatiga ega emas.
Har qanday grafikani chizish uchun JavaScript’dan foydalanishingiz kerak.
getContext() metodi chizish uchun vositalar (metodlar) to‘plamiga ega obyektni qaytaradi.
Canvas’da chizish
2D kontekstni yaratganingizdan so‘ng canvas’da chizishingiz mumkin.
fillRect() metodi yuqori chap burchagi 20,20 pozitsiyada joylashgan qora to‘rtburchak chizadi. To‘rtburchakning kengligi 150 piksel, balandligi 100 piksel.
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 chizish obyektining to‘ldirish rangini o‘rnatadi:
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 yordamida yangi <canvas> elementini yaratib, uni mavjud HTML sahifaga 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 »
Yo‘llar (Paths)
Canvas’da chizishning odatiy usuli:
- Yo‘lni boshlash - beginPath()
- Nuqtaga o‘tish - moveTo()
- Yo‘lda chizish - lineTo()
- Yo‘lni 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 to‘liq ma’lumotnomasi
Ushbu ma’lumotnoma canvas’da matn, chiziqlar, to‘rtburchaklar, aylanalar, rasmlar va boshqalarni chizish uchun ishlatiladigan getContext("2d") obyektining barcha xususiyatlari va metodlarini qamrab oladi.
Chizish metodlari
Canvas’da bevosita chizish uchun faqat 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 boshlaydi yoki joriy yo‘lni qayta o‘rnatadi |
| closePath() | Yo‘lga joriy nuqtadan boshlang‘ich nuqtagacha chiziq qo‘shadi |
| isPointInPath() | Belgilangan nuqta joriy yo‘lda bo‘lsa, true 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 aylananing qismlari) qo‘shadi |
| arcTo() | Yo‘lga ikkita tangens orasida yoy/egri chiziq qo‘shadi |
| quadraticCurveTo() | Yo‘lga kvadratik Bezier egri chizig‘ini qo‘shadi |
Text
| Metod/xususiyat | Tavsif |
|---|---|
| direction | Matn chizishda ishlatiladigan yo‘nalishni o‘rnatadi yoki qaytaradi |
| fillText() | Canvas’ga "to‘ldirilgan" matn chizadi |
| font | Matn mazmuni uchun shrift xususiyatlarini o‘rnatadi yoki qaytaradi |
| measureText() | Belgilangan matn kengligini o‘z ichiga olgan obyektni qaytaradi |
| strokeText() | Canvas’ga matn chizadi |
| textAlign | Matn mazmunining tekislanishini o‘rnatadi yoki qaytaradi |
| textBaseline | Matn chizishda ishlatiladigan asosiy chiziqni (baseline) o‘rnatadi yoki qaytaradi |
Ranglar, uslublar va soyalar
| Metod/Xususiyat | Tavsif |
|---|---|
| addColorStop() | Gradient obyektidagi ranglar va to‘xtash pozitsiyalarini belgilaydi |
| createLinearGradient() | Chiziqli gradient yaratadi (canvas mazmunida foydalanish uchun) |
| createPattern() | Belgilangan elementni belgilangan yo‘nalishda takrorlaydi |
| createRadialGradient() | Radial/aylanma gradient yaratadi (canvas mazmunida foydalanish uchun) |
| fillStyle | Chizmani to‘ldirish uchun ishlatiladigan rang, gradient yoki naqshni o‘rnatadi yoki qaytaradi |
| lineCap | Chiziq uchlarining uslubini o‘rnatadi yoki qaytaradi |
| lineJoin | Ikki chiziq uchrashganda hosil bo‘ladigan 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 | Soyaning shakldan gorizontal masofasini o‘rnatadi yoki qaytaradi |
| shadowOffsetY | Soyaning shakldan vertikal masofasini o‘rnatadi yoki qaytaradi |
| strokeStyle | Chiziqlar (stroke) uchun ishlatiladigan rang, gradient yoki naqshni o‘rnatadi yoki qaytaradi |
Transformatsiyalar
| Metod | Tavsif |
|---|---|
| scale() | Joriy chizmani kattalashtirib yoki kichiklashtirib masshtablaydi |
| rotate() | Joriy chizmani aylantiradi |
| translate() | Canvas’dagi (0,0) pozitsiyasini 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() | Canvas’ga rasm, canvas yoki video chizadi |
ImageData obyekti / Piksellar bilan ishlash
| Metod/Xususiyat | Tavsif |
|---|---|
| createImageData() | Yangi, bo‘sh ImageData obyektini yaratadi |
| getImageData() | Canvas’dagi belgilangan to‘rtburchak uchun piksel ma’lumotlaridan nusxa oladigan ImageData obyektini qaytaradi |
| ImageData.data | Belgilangan ImageData obyektining rasm 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 |
Kompozitsiya (Compositing)
| Xususiyat | Tavsif |
|---|---|
| globalAlpha | Chizmaning joriy alfa yoki shaffoflik qiymatini o‘rnatadi yoki qaytaradi |
| globalCompositeOperation | Yangi rasm mavjud rasm ustiga qanday chizilishini o‘rnatadi yoki qaytaradi |
Boshqa metodlar
| Metod | Tavsif |
|---|---|
| clip() | Asl canvas’dan istalgan shakl va o‘lchamdagi hududni qirqib oladi |
| save() | Joriy chizma kontekstining holatini va uning barcha atributlarini saqlaydi |
| restore() | Avval saqlangan holat va atributlarni tiklaydi |
| createEvent() | |
| getContext() | |
| toDataURL() |
Standart xususiyatlar va hodisalar
canvas obyekti standart xususiyatlar va hodisalarni ham qo‘llab-quvvatlaydi.
Tegishli sahifalar
Canvas darsligi: Canvas darsligi
HTML darsligi: HTML5 Canvas
HTML ma’lumotnomasi: HTML <canvas> tegi
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
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!