Canvas: bu nima, chizish metodlari va qanday ishlaydi

Canvas nima?

Canvas — ekranda to'rtburchakli maydon bo'lib, unda dastur chizish konteksti yordamida pikselma-piksel chizishni amalga oshiradi. Kontseptsiya 2004 yilda WHATWG spetsifikatsiyasining bir qismi sifatida HTML5 veb standartlarida paydo bo'lgan va shu vaqtdan boshlab barcha platformalarda grafika asosiga aylangan.

Canvas ning deklarativ yondashuvlardan (SVG, UI komponentlari) asosiy farqi shundaki, Canvas sahna saqlamaydi. Chizilgandan so'ng piksellar mustahkamlanadi va tasvirni o'zgartirish uchun dastur kerakli maydonni o'chirib, qayta chizishi kerak. Bu animatsiyada maksimal unumdorlik va sahnani saqlash uchun minimal xotira sarfini ta'minlaydi.

Canvas ikki turdagi kontekstni qo'llab-quvvatlaydi: tekis grafika uchun 2D va GPU apparat tezlashuvi bilan uch o'lchovli chizish uchun WebGL / WebGL2. Statista (2025) ma'lumotlariga ko'ra, Canvas API brauzer o'yinlarining 89 foizida va veb muharrirlarning 67 foizida qo'llaniladi.

Mobil ishlanma uchun Canvas har bir platformada moslashtirilgan: Android da xuddi shu nomdagi Canvas sinfi, iOS da Core Graphics va Metal, .NET MAUI da Microsoft.Maui.Graphics orqali. Yagona prinsip — chizish konteksti, koordinatalar tizimi va transformatsiyalar steki — platformadan qat'iy nazar o'zgarishsiz qoladi.

Canvas elementlari

Taxta pikselda belgilangan o'lchamdagi bit matritsasini ifodalaydi. Har bir piksel RGBA qiymatini saqlaydi — qizil, yashil, ko'k kanallar va alfa shaffoflik. Canvas koordinatalar tizimi yuqori chap burchakdan boshlanadi, bu erda X o'qi o'ngga, Y o'qi esa pastga ketadi.

Taxtaning o'lchami ikki parametr bilan belgilanadi: pikselda kenglik va balandlik. Taxtaning width va height atributlarini CSS o'lchamlaridan farqlash muhim — CSS ko'rinadigan maydonni masshtablashi mumkin, ammo ichki piksellar soni atributlar bilan belgilangan holda qoladi. Ushbu parametrlarning mos kelmasligi tasvirning xiralashishiga olib keladi.

Android da Canvas o'lchami odatda u yaratilgan View yoki Bitmap o'lchami bilan mos keladi. onDraw() vaqtida ko'rinish o'lchamlariga sozlangan Canvas uzatiladi — dasturchi o'lchamlarni qo'lda belgilashi shart emas.

Canvas qanday ishlaydi?

Canvas chizish konteksti orqali ishlaydi — joriy holatni saqlaydigan ob'ekt: to'ldirish rangi, chiziq qalinligi, transformatsiyalar va yo'l. Chizish metodlarining barcha chaqiruvlari ushbu holatga qo'llaniladi va taxtaning bit matritsasini o'zgartiradi.

Chizish jarayoni konveyer bo'ylab ketadi: maydonni tozalash → holatni sozlash → yo'lni qurish → kontur yoki to'ldirish. Animatsiyada bu tsikl soniyasiga 60 marta takrorlanadi, bu silliqlikni saqlash uchun har bir qadamni optimallashtirishni talab qiladi.

Canvas immediate mode rendering — zudlik bilan chizish rejimidan foydalanadi, bunda har bir chizish buyrug'i darhol bajariladi. Retained mode dan (SVG yoki DOM) farqli o'laroq, Canvas ob'ektlar ro'yxatini saqlamaydi. Bu xotira sarfini kamaytiradi, ammo interaktivlikni murakkablashtiradi — dasturchi o'zi hit-testing va qayta chizishni amalga oshiradi.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

Yuqoridagi misolda 2D kontekstini olamiz, to'ldirish rangini sozlaymiz, to'rtburchak chizamiz, so'ng shriftni o'rnatamiz va matn chiqaramiz. Barcha amallar elementning width va height atributlarida ko'rsatilgan o'lchamdagi taxtada bajariladi.

Canvas holat steki chizish parametrlarini saqlash va tiklash imkonini beradi. save() metodi joriy holatni stekka joylashtiradi, restore() avvalgisini tiklaydi. Bu qolgan elementlarga ta'sir qilmasdan elementlar guruhiga siljitish yoki aylantirish qo'llash kerak bo'lgan kaskad transformatsiyalarida qulay.

Canvas API ning asosiy metodlari

Canvas API primitivlar, tasvirlar, matn chizish va uslublarni boshqarish uchun taxminan 40 metodni taqdim etadi. Asosiy to'plam to'rtburchaklar, yo'llar, yoylar va matn bilan ishlash uchun metodlarni o'z ichiga oladi. Keling, asosiy metod guruhlarini ko'rib chiqaylik.

Primitivlarni chizish

To'rtburchaklar — Canvas ning eng tezkor primitivlari. fillRect(x, y, w, h) metodi to'ldirilgan to'rtburchak chizadi, strokeRect() — faqat chegarani, clearRect() — maydonni tozalaydi. Murakkab ko'pburchaklar uchun kadrlar orasida qayta ishlatilishi mumkin bo'lgan Path2D ob'ekti ishlatiladi.

Tasvirlar bilan ishlash

drawImage() — Canvas da rastr tasvirlarini chizish uchun asosiy metod. Metod uch parametr to'plamini qabul qiladi: oddiy nusxalash, masshtablash va masshtablash bilan kesish. Tasvir HTMLImageElement, SVGImageElement yoki boshqa Canvas dan yuklanishi mumkin.

Mobil ishlanma uchun drawImage() ning Android da Bitmap va iOS da UIImage bilan ishlashi juda muhim. Platforma tatbiqlari tasvir va Canvas bir xil GPU tekstura xotirasida bo'lganda apparat tezlashuvidan foydalanadi. Agar tasvir rang profiliga mos kelmasa, konvertatsiya tufayli unumdorlik yo'qotilishi mumkin.

Canvas da animatsiya

requestAnimationFrame() — Canvas animatsiyasi uchun standart mexanizm. setInterval dan farqli o'laroq, bu metod chizishni ekran yangilanish chastotasi bilan sinxronlashtiradi (odatda 60 FPS). Varag'i orqa fonda bo'lganda brauzer chaqiruvlarni to'xtatib, batareyani tejaydi.

Canvas animatsiyasini optimallashtirish uchun qayta chizish maydonini minimallashtirish kerak: butun taxtani tozalash o'rniga clearRect() ni faqat o'zgartirilgan maydonda ishlating. Elementlarni bir qatlamda guruhlash va statik qismlarni offscreen Canvas da keshlash render konveyeridagi yukni kamaytiradi.

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

Animatsiya tsikli taxtani tozalaydi, ob'ektning o'rnini yangilaydi va uni qayta chizadi. requestAnimationFrame silliqlikni kafolatlaydi va varag'i yashirilganda avtomatik pauza beradi, bu qurilma resurslarini tejaydi.

Mobil ishlanmada Canvas

Canvas mobil platformalarda turlicha tatbiq qilingan, ammo dasturiy taxta umumiy g'oyasiga asoslanadi. Android da Canvas sinfi har qanday View ning onDraw(Canvas) metodiga uzatiladigan grafik tizimining bir qismidir. iOS da ekvivalent Core Graphics CGContext kontekstidir.

Android da Canvas

Android Canvas Bitmap yoki SurfaceView bilan birgalikda ishlaydi. Canvas Bitmap orqali yaratilganda chizish xotiraga amalga oshiriladi, SurfaceView orqali esa to'g'ridan-to'g'ri ekranga apparat tezlashuvi bilan chiqariladi. API 14+ dan Canvas HWUI — chizish buyruqlarini OpenGL yoki Vulkan ga tarjima qiladigan apparat tezlatkichidan foydalanadi.

Android Canvas ning asosiy metodlariga drawBitmap(), drawCircle(), drawLine() va drawPath() kiradi. Barcha metodlar Paint — rang, qalinlik, tekislash effektlarini boshqaradigan ob'ektni qabul qiladi. Google I/O (2024) ma'lumotlariga ko'ra, HWUI dagi Canvas dasturiy renderlash bilan solishtirganda 40 foizgacha unumdorlik o'sishini ko'rsatadi.

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

Android da Canvas API 14+ dan apparat tezlashuvidan standart sifatida foydalanadi. Murakkab grafika uchun fon ipida chizish uchun alohida qatlam ajratadigan SurfaceView yoki TextureView tavsiya etiladi. Bu intensiv animatsiyada UI ipining bloklanishini oldini oladi.

iOS da Canvas

Core Graphics — Apple ning rastr va vektor grafikasi uchun freymvorki, Canvas ning ekvivalenti. CGContext konteksti chiziqlar, egri chiziqlar, gradientlar va soyalar chizish uchun metodlarni taqdim etadi. SwiftUI da Canvas iOS 15 da qo'shilgan Canvas strukturasi orqali mavjud.

SwiftUI Canvas Core Graphics ustidagi tip-xavfsiz o'ram bo'lgan GraphicsContext dan foydalanadi. Dasturchi transformatsiyalar, qatlamlar va belgilarni qo'llab-quvvatlaydigan GraphicsContext bilan ishlaydi. UIKit dan farqli o'laroq, SwiftUI Canvas Retina ekranlari va dinamik turlarni avtomatik boshqaradi.

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

SwiftUI Canvas deklarativ sintaksis va avtomatik chizish optimallashtirishi bilan ajralib turadi. Freymvork holat o'zgarganda taxtaning qaysi qismlarini qayta chizish kerakligini o'zi aniqlaydi. GraphicsContext drawLayer metodi orqali qatlamlarni qo'llab-quvvatlaydi, bu ko'p qatlamli grafika yaratishni osonlashtiradi.

Canvas unumdorligi

Canvas unumdorligi uch omilga bog'liq: qayta chizish maydoni, chizish chaqiruvlari soni va operatsiyalarning murakkabligi. Har bir chizish metodi chaqiruvi konveyerdan o'tadigan buyruqdir: CPU buyruqni shakllantiradi, GPU rastrlashni amalga oshiradi.

Optimallashtirishning asosiy qoidasi — chaqiruvlar sonini minimallashtirish. 1000 alohida nuqta chizish o'rniga 1000 segmentli yo'ldan foydalaning — 1000 o'rniga bitta stroke() chaqiruvi. Ikkinchi qoida — statikani keshlash: o'zgarmas elementlarni offscreen Canvas ga chiqaring va drawImage() orqali nusxalang.

Profillash vositalari: veb uchun Chrome DevTools Performance, Android uchun GPU Inspector va iOS uchun Instruments. Google Chrome Developers (2025) ma'lumotlariga ko'ra, Canvas unumdorlik muammolarining 70 foizi haddan tashqari qayta chizish va qatlamlarni keshlashmaslik tufayli yuzaga keladi.

Mobil qurilmalar uchun batareyani tejash juda muhim. Haddan tashqari chizish GPU ni yuklaydi va ish vaqtini qisqartiradi. Android da willBePresented() metodidan va iOS da displayLink dan ekran yangilanish chastotasi bilan sinxronizatsiya uchun foydalaning.

Canvas ning kengaytirilgan imkoniyatlari

Zamonaviy Canvas oddiy 2D chizish doirasidan chiqib ketgan. CanvasContext asosidagi WebGL apparat tezlashuvi bilan uch o'lchovli grafikani renderlash imkonini beradi. OffscreenCanvas og'ir chizishni UI ipini bloklamasdan Web Workers ga o'tkazadi.

Canvas orqali WebGL

WebGL — brauzerdan OpenGL ES ga kirishni ta'minlaydigan Canvas kontekstidir. fillRect() o'rniga dasturchi GLSL da shaderlar yozadi va geometriyani buferlarga yuklaydi. Statista (2025) ma'lumotlariga ko'ra, mobil brauzerlarning 92 foizi WebGL 2.0 ni qo'llab-quvvatlaydi, bu Canvas ni veb o'yinlari va 3D vizuallashtirishlarining asosiga aylantiradi.

WebGL uchun konteyner sifatida Canvas bitta ilovada 2D va 3D grafikasining integratsiyasini osonlashtiradi. Masalan, 3D sahnasi WebGL orqali renderlanadi, UI qoplamasi esa o'sha taxtaning 2D konteksti orqali chiziladi. Aralash chizish Z-tartibini boshqarish va kadr chastotasini sinxronlashtirishni talab qiladi.

OffscreenCanvas

OffscreenCanvas — chizishni fon ipiga o'tkazish uchun API. Oddiy Canvas dan farqli o'laroq, OffscreenCanvas DOM ga bog'liq emas va Web Worker da ishlatilishi mumkin. Bu FPS tushmasdan murakkab grafik hisoblashlarni asosiy ip bilan parallel bajarish imkonini beradi.

Tayyor kadrni Worker dan asosiy ipga o'tkazish transferControlToOffscreen() va commit() orqali amalga oshadi. Chrome Platform Status (2025) ma'lumotlariga ko'ra, OffscreenCanvas brauzerlarning 87 foizida qo'llab-quvvatlanadi va intensiv chizishli ilovalar — grafik muharrirlar, chartlar va animatsiyalar uchun tavsiya etiladi.