Canvas: nədir, təsvir metodları və necə işləyir

Canvas nədir?

Canvas — ekranda düzbucaqlı sahədir, burada proqram çəkmə konteksti vasitəsilə piksel-piksel təsvir həyata keçirir. Konsepsiya 2004-cü ildə WHATWG spesifikasiyasının bir hissəsi olaraq HTML5 veb standartlarında yaranmışdır və o vaxtdan bəri bütün platformalarda qrafikanın əsasına çevrilmişdir.

Canvas-ın deklarativ yanaşmalardan (SVG, UI komponentləri) əsas fərqi ondadır ki, Canvas səhnəni saxlamır. Təsvirdən sonra piksellər təsbit olunur və təsviri dəyişdirmək üçün proqram lazımi sahəni silib yenidən çəkməlidir. Bu, animasiyada maksimum performans və səhnənin saxlanması üçün minimal yaddaş istehlakı təmin edir.

Canvas iki növ kontekst dəstəkləyir: düz qrafika üçün 2D və GPU aparat sürətləndirməsi ilə üçölçülü təsvir üçün WebGL / WebGL2. Statista (2025) məlumatlarına görə, Canvas API brauzer oyunlarının 89%-də və veb redaktorlarının 67%-də istifadə olunur.

Mobil inkişaf üçün Canvas hər platformada uyğunlaşdırılmışdır: Android-də eyniadlı Canvas sinfi, iOS-da Core Graphics və Metal, .NET MAUI-də Microsoft.Maui.Graphics vasitəsilə. Vahid prinsip — çəkmə konteksti, koordinat sistemi və transformasiya yığını — platformadan asılı olmayaraq dəyişməz qalır.

Canvas elementləri

Lövhə piksel ilə təyin edilmiş sabit ölçülü bit matrisini təmsil edir. Hər piksel RGBA dəyərini saxlayır — qırmızı, yaşıl, mavi kanallar və alfa şəffaflığı. Canvas koordinat sistemi yuxarı sol küncdən başlayır, burada X oxu sağa, Y oxu isə aşağıya gedir.

Lövhənin ölçüsü iki parametrlə müəyyən edilir: piksel ilə en və hündürlük. Lövhənin width və height atributlarını CSS ölçülərindən fərqləndirmək vacibdir — CSS görünən sahəni miqyaslaya bilər, lakin daxili rezolyusiya atributlarla təyin edilmiş qalır. Bu parametrlərin uyğunsuzluğu təsvirin bulanıqlaşmasına gətirib çıxarır.

Android-də Canvas ölçüsü adətən onun yaradıldığı View və ya Bitmap ölçüsü ilə üst-üstə düşür. onDraw() zamanı artıq görünüş ölçülərinə uyğunlaşdırılmış Canvas ötürülür — tərtibatçı ölçüləri əl ilə təyin etməyə ehtiyac duymur.

Canvas necə işləyir?

Canvas çəkmə konteksti vasitəsilə fəaliyyət göstərir — cari vəziyyəti saxlayan obyekt: doldurma rəngi, xətt qalınlığı, transformasiyalar və yol. Çəkmə metodlarının bütün çağırışları bu vəziyyətə tətbiq edilir və lövhənin bit matrisini dəyişir.

Təsvir prosesi konveyer boyu gedir: sahənin təmizlənməsi → vəziyyətin qurulması → yolun qurulması → kontur və ya doldurma. Animasiyada bu dövr saniyədə 60 dəfə təkrarlanır ki, bu da hamarlığı qorumaq üçün hər addımın optimallaşdırılmasını tələb edir.

Canvas immediate mode rendering — dərhal rejimdən istifadə edir, burada hər çəkmə əmri dərhal icra olunur. Retained mode-dan (SVG və ya DOM) fərqli olaraq, Canvas obyektlərin siyahısını saxlamır. Bu, yaddaş istehlakını azaldır, lakin interaktivliyi çətinləşdirir — tərtibatçı özü hit-testing və yenidənçəkməni həyata keçirir.

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);

Yuxarıdakı nümunədə 2D kontekstini alırıq, doldurma rəngini təyin edirik, düzbucaqlı çəkirik, sonra şrift təyin edirik və mətn çıxarırıq. Bütün əməliyyatlar elementin width və height atributlarında göstərilmiş ölçüdə lövhədə yerinə yetirilir.

Canvas vəziyyət yığını çəkmə parametrlərini saxlamağa və bərpa etməyə imkan verir. save() metodu cari vəziyyəti yığına yerləşdirir, restore() əvvəlkini bərpa edir. Bu, qalan elementlərə təsir etmədən elementlər qrupuna sürüşdürmə və ya fırlanma tətbiq etmək lazım olduqda kaskad transformasiyalarında rahatdır.

Canvas API-nin əsas metodları

Canvas API primitivlərin, şəkillərin, mətnin təsviri və stillərin idarə edilməsi üçün təxminən 40 metod təqdim edir. Əsas dəst düzbucaqlılar, yollar, qövslər və mətnlə iş üçün metodları əhatə edir. Əsas metod qruplarını nəzərdən keçirək.

Primitivlərin çəkilməsi

Düzbucaqlılar — Canvas-ın ən sürətli primitivləri. fillRect(x, y, w, h) metodu dolu düzbucaqlı çəkir, strokeRect() — yalnız sərhədi, clearRect() — sahəni təmizləyir. Mürəkkəb çoxbucaqlılar üçün kadrlar arasında təkrar istifadə oluna bilən Path2D obyekti istifadə olunur.

Şəkillərlə iş

drawImage() — Canvas-da rastr şəkillərinin çəkilməsi üçün əsas metod. Metod üç parametr dəsti qəbul edir: sadə kopyalama, miqyaslama və miqyaslama ilə kəsmə. Şəkil HTMLImageElement, SVGImageElement və ya başqa Canvas-dan yüklənə bilər.

Mobil inkişaf üçün drawImage()-in Android-də Bitmap və iOS-da UIImage ilə işləməsi kritikdir. Platforma tətbiqləri şəkil və Canvas eyni GPU tekstur yaddaşında olduqda aparat sürətləndirməsindən istifadə edir. Şəkil rəng profilinə uyğun gəlmirsə, konvertasiya səbəbindən performans itkisi mümkündür.

Canvas-da animasiya

requestAnimationFrame() — Canvas animasiyası üçün standart mexanizm. setInterval-dan fərqli olaraq, bu metod təsviri ekran yeniləmə tezliyi ilə sinxronlaşdırır (adətən 60 FPS). Vərəq arxa planda olduqda brauzer çağırışları dayandıraraq batareyaya qənaət edir.

Canvas animasiyasını optimallaşdırmaq üçün yenidənçəkmə sahəsini minimuma endirmək lazımdır: bütün lövhəni təmizləmək əvəzinə clearRect()-dən yalnız dəyişdirilmiş sahədə istifadə edin. Elementləri bir təbəqədə qruplaşdırmaq və statik hissələri offscreen Canvas-da keşləmək render konveyerində yükü azaldır.

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);
}

Animasiya dövrü lövhəni təmizləyir, obyektin mövqeyini yeniləyir və onu yenidən çəkir. requestAnimationFrame hamarlığı təmin edir və vərəq gizlədildikdə avtomatik pauza verir, bu da cihaz resurslarına qənaət edir.

Mobil inkişafda Canvas

Canvas mobil platformalarda fərqli tətbiq olunsa da, proqram lövhəsi ümumi ideyasına əsaslanır. Android-də Canvas sinfi istənilən View-in onDraw(Canvas) metoduna ötürülən qrafik sisteminin bir hissəsidir. iOS-da ekvivalent Core Graphics CGContext kontekstidir.

Android-də Canvas

Android Canvas Bitmap və ya SurfaceView ilə birlikdə işləyir. Canvas Bitmap vasitəsilə yaradıldıqda təsvir yaddaşa aparılır, SurfaceView vasitəsilə isə birbaşa ekrana aparat sürətləndirməsi ilə çıxarılır. API 14+-dan Canvas HWUI — çəkmə əmrlərini OpenGL və ya Vulkan-a tərcümə edən aparat sürətləndiricisindən istifadə edir.

Android Canvas-ın əsas metodlarına drawBitmap(), drawCircle(), drawLine() və drawPath() daxildir. Bütün metodlar Paint — rəng, qalınlıq, hamarlaşdırma effektlərini idarə edən obyekti qəbul edir. Google I/O (2024) məlumatlarına görə, HWUI üzərində Canvas proqram renderinqi ilə müqayisədə 40% performans artımı göstərir.

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-də Canvas API 14+-dan aparat sürətləndirməsindən standart olaraq istifadə edir. Mürəkkəb qrafika üçün fon thread-də təsvir üçün ayrıca təbəqə ayıran SurfaceView və ya TextureView tövsiyə olunur. Bu, intensiv animasiya zamanı UI thread-in bloklanmasının qarşısını alır.

iOS-da Canvas

Core Graphics — Apple-ın rastr və vektor qrafikası üçün çərçivəsi, Canvas-ın ekvivalenti. CGContext konteksti xətlər, əyrilər, gradientlər və kölgələr çəkmək üçün metodlar təqdim edir. SwiftUI-də Canvas iOS 15-də əlavə edilmiş Canvas strukturu vasitəsilə əlçatandır.

SwiftUI Canvas Core Graphics üzərində tip-təhlükəsiz sarğı olan GraphicsContext-dən istifadə edir. Tərtibatçı transformasiyaları, təbəqələri və simvolları dəstəkləyən GraphicsContext ilə işləyir. UIKit-dən fərqli olaraq, SwiftUI Canvas Retina ekranları və dinamik tipləri avtomatik idarə edir.

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 və avtomatik təsvir optimallaşdırması ilə fərqlənir. Çərçivə vəziyyət dəyişdikdə lövhənin hansı hissələrinin yenidən çəkilməli olduğunu özü müəyyən edir. GraphicsContext drawLayer metodu vasitəsilə təbəqələri dəstəkləyir ki, bu da çoxqatlı qrafikanın yaradılmasını asanlaşdırır.

Canvas performansı

Canvas performansı üç amildən asılıdır: yenidənçəkmə sahəsi, çəkmə çağırışlarının sayı və əməliyyatların mürəkkəbliyi. Hər çəkmə metodu çağırışı konveyerdən keçən bir əmrdir: CPU əmri formalaşdırır, GPU rastrlaşdırmanı yerinə yetirir.

Optimallaşdırmanın əsas qaydası — çağırışların sayının minimallaşdırılması. 1000 ayrı nöqtə çəkmək əvəzinə 1000 seqmentli yoldan istifadə edin — 1000 əvəzinə bir stroke() çağırışı. İkinci qayda — statikanın keşlənməsi: dəyişməz elementləri offscreen Canvas-a çıxarın və drawImage() vasitəsilə kopyalayın.

Profilinq alətləri: veb üçün Chrome DevTools Performance, Android üçün GPU Inspector və iOS üçün Instruments. Google Chrome Developers (2025) məlumatlarına görə, Canvas performans problemlərinin 70%-i həddindən artıq yenidənçəkmə və təbəqələrin keşlənməməsi səbəbindən yaranır.

Mobil cihazlar üçün batareyaya qənaət kritikdir. Həddindən artıq təsvir GPU-nu yükləyir və iş müddətini azaldır. Android-də willBePresented() metodundan və iOS-da displayLink-dən ekran yeniləmə tezliyi ilə sinxronizasiya üçün istifadə edin.

Canvas-ın genişləndirilmiş imkanları

Müasir Canvas sadə 2D təsvir çərçivəsindən kənara çıxmışdır. CanvasContext əsasında WebGL aparat sürətləndirməsi ilə üçölçülü qrafikanı render etməyə imkan verir. OffscreenCanvas ağır təsviri UI thread-ni bloklamadan Web Workers-a köçürür.

Canvas vasitəsilə WebGL

WebGL — brauzerdən OpenGL ES-ə giriş təmin edən Canvas kontekstidir. fillRect() əvəzinə tərtibatçı GLSL-də shaderlər yazır və həndəsəni buferlərə yükləyir. Statista (2025) məlumatlarına görə, mobil brauzerlərin 92%-i WebGL 2.0-ı dəstəkləyir ki, bu da Canvas-ı veb oyunları və 3D vizuallaşdırmalarının əsasına çevirir.

WebGL üçün konteyner kimi Canvas bir tətbiqdə 2D və 3D qrafikasının inteqrasiyasını asanlaşdırır. Məsələn, 3D səhnəsi WebGL vasitəsilə render olunur, UI örtüyü isə eyni lövhənin 2D konteksti vasitəsilə çəkilir. Qarışıq təsvir Z-sırasının idarə edilməsini və kadr tezliyinin sinxronizasiyasını tələb edir.

OffscreenCanvas

OffscreenCanvas — təsviri fon thread-ə köçürmək üçün API. Adi Canvas-dan fərqli olaraq, OffscreenCanvas DOM-a bağlı deyil və Web Worker-də istifadə oluna bilər. Bu, FPS düşmədən mürəkkəb qrafik hesablamalarını əsas thread ilə paralel aparmağa imkan verir.

Hazır kadrın Worker-dən əsas thread-ə ötürülməsi transferControlToOffscreen() və commit() vasitəsilə baş verir. Chrome Platform Status (2025) məlumatlarına görə, OffscreenCanvas brauzerlərin 87%-də dəstəklənir və intensiv təsvirli tətbiqlər — qrafik redaktorları, çartlar və animasiyalar üçün tövsiyə olunur.