Canvas: mi ez, megjelenítési metódusok és hogyan működik

Mi az a Canvas?

Canvas egy téglalap alakú terület a képernyőn, ahol a program pixelről pixelre történő megjelenítést végez rajzolási kontextus segítségével. A koncepció a HTML5 webes szabványokban született a WHATWG specifikáció részeként 2004-ben, és azóta a grafika alapjává vált minden platformon.

A fő különbség a Canvas és a deklaratív megközelítések (SVG, UI komponensek) között az, hogy a Canvas nem tárolja a jelenetet. A megjelenítés után a pixelek rögzítésre kerülnek, és a kép megváltoztatásához a programnak ki kell törölnie és újra kell rajzolnia a szükséges területet. Ez maximális teljesítményt biztosít animációnál és minimális memóriafogyasztást a jelenet tárolásához.

A Canvas két típusú kontextust támogat: 2D-t sík grafika esetén és WebGL / WebGL2-t háromdimenziós megjelenítéshez GPU hardveres gyorsítással. A Statista (2025) szerint a Canvas API a böngészős játékok 89%-ában és a webes szerkesztők 67%-ában használatos.

Mobilfejlesztéshez a Canvas minden platformon adaptálva van: Androidban az azonos nevű Canvas osztályon keresztül, iOS-ben a Core Graphics és Metal segítségével, .NET MAUI-ban a Microsoft.Maui.Graphics-on keresztül. Az egységes elv — rajzolási kontextus, koordinátarendszer és transzformációs verem — platformtól függetlenül változatlan marad.

A Canvas elemei

A vászon egy fix méretű bitmátrixot képvisel, pixelben megadva. Minden pixel RGBA értéket tárol — piros, zöld, kék csatornák és alfa átlátszóság. A Canvas koordinátarendszere a bal felső sarokból indul, ahol az X tengely jobbra, az Y tengely pedig lefelé halad.

A vászon méretét két paraméter határozza meg: szélesség és magasság pixelben. Fontos megkülönböztetni a vászon width és height attribútumait a CSS-méretektől — a CSS skálázhatja a látható területet, de a belső felbontás az attribútumok által beállított marad. E paraméterek eltérése a kép elmosódásához vezet.

Androidban a Canvas mérete általában megegyezik annak a View-nak vagy Bitmap-nek a méretével, amelyen létrehozták. Az onDraw()-nál egy már a nézet méretére beállított Canvas kerül átadásra — a fejlesztőnek nem kell manuálisan beállítania a méreteket.

Hogyan működik a Canvas?

Canvas rajzolási kontextuson keresztül működik — egy objektum, amely tárolja az aktuális állapotot: kitöltőszín, vonalvastagság, transzformációk és útvonal. A rajzolási metódusok összes hívása erre az állapotra vonatkozik, és módosítja a vászon bitmátrixát.

A megjelenítési folyamat egy csővezetéket követ: terület törlése → állapot beállítása → útvonal építése → körvonal vagy kitöltés. Animációnál ez a ciklus másodpercenként 60-szor ismétlődik, ami az egyes lépések optimalizálását igényli a simaság fenntartásához.

A Canvas immediate mode rendering-et használ — azonnali módot, ahol minden rajzolási parancs azonnal végrehajtódik. A retained mode-dal (SVG vagy DOM) ellentétben a Canvas nem tárol objektumlistát. Ez csökkenti a memóriafogyasztást, de bonyolítja az interaktivitást — a fejlesztő maga implementálja a hit-testinget és az átrajzolást.

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

A fenti példában lekérjük a 2D kontextust, beállítjuk a kitöltőszínt, rajzolunk egy téglalapot, majd beállítjuk a betűtípust és megjelenítjük a szöveget. Minden művelet a vásznon történik, amelynek mérete az elem width és height attribútumaiban van meghatározva.

A Canvas állapotverem lehetővé teszi a rajzolási paraméterek mentését és visszaállítását. A save() metódus az aktuális állapotot a verembe helyezi, a restore() visszaállítja az előzőt. Ez hasznos kaszkád transzformációknál, amikor egy elemcsoportra kell eltolást vagy forgatást alkalmazni anélkül, hogy a többit befolyásolná.

A Canvas API fő metódusai

Canvas API körülbelül 40 metódust kínál primitívek, képek, szöveg megjelenítéséhez és stílusok kezeléséhez. Az alapkészlet metódusokat tartalmaz téglalapokkal, útvonalakkal, ívekkel és szöveggel való munkához. Tekintsük át a metódusok fő csoportjait.

Primitívek rajzolása

Téglalapok — a Canvas leggyorsabb primitívjei. A fillRect(x, y, w, h) metódus kitöltött téglalapot rajzol, a strokeRect() — csak a szegélyt, a clearRect() — törli a területet. Összetett sokszögekhez a Path2D objektum használható, amely a képkockák között újra felhasználható.

Munka képekkel

drawImage() — a fő metódus raszterképek Canvas-ra rajzolásához. A metódus három paraméterkészletet fogad: egyszerű másolás, skálázás, valamint vágás skálázással. A kép betölthető HTMLImageElement-ből, SVGImageElement-ből vagy másik Canvas-ból.

Mobilfejlesztéshez kritikus, hogy a drawImage() Androidban Bitmap-pel, iOS-ben UIImage-lel működik. A platformimplementációk hardveres gyorsítást használnak, ha a kép és a Canvas ugyanabban a GPU textúramemóriában található. Ha a kép színprofilja nem egyezik, teljesítményvesztés lehetséges a konverzió miatt.

Animáció Canvas-on

requestAnimationFrame() — a szabványos mechanizmus Canvas-animációhoz. A setInterval-lal ellentétben ez a metódus szinkronizálja a megjelenítést a képernyő frissítési gyakoriságával (általában 60 FPS). Amikor a lap a háttérben van, a böngésző leállítja a hívásokat, kímélve az akkumulátort.

A Canvas-animáció optimalizálásához minimalizálni kell az átrajzolási területet: ahelyett, hogy a teljes vásznat törölné, használja a clearRect()-t csak a megváltozott területen. Az elemek egy rétegbe csoportosítása és a statikus részek gyorsítótárazása offscreen Canvas-ban csökkenti a megjelenítési csővezeték terhelését.

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

Az animációs ciklus törli a vásznat, frissíti az objektum pozícióját és újrarajzolja azt. A requestAnimationFrame garantálja a simaságot és automatikus szünetet a lap elrejtésekor, ami kíméli az eszköz erőforrásait.

Canvas a mobilfejlesztésben

Canvas mobil platformokon eltérően van implementálva, de a programozott vászon közös ötletén alapul. Androidban a Canvas osztály a grafikus rendszer része, amelyet bármely View onDraw(Canvas) metódusába átadnak. iOS-ben a megfelelője a Core Graphics CGContext kontextussal.

Canvas Androidban

Android Canvas Bitmap-pel vagy SurfaceView-vel együttműködve működik. Amikor a Canvas-t Bitmap-en keresztül hozzák létre, a megjelenítés memóriába történik, SurfaceView-n keresztül pedig közvetlenül a képernyőre hardveres gyorsítással. API 14+-tól a Canvas HWUI-t használ — a hardveres gyorsítót, amely a rajzolási parancsokat OpenGL-re vagy Vulkan-ra fordítja.

Az Android Canvas kulcsmetódusai közé tartozik a drawBitmap(), drawCircle(), drawLine() és drawPath(). Minden metódus Paint-et fogad — egy objektumot, amely a stílust kezeli: szín, vastagság, élsimítási effektek. A Google I/O (2024) szerint a Canvas HWUI-n akár 40%-os teljesítménynövekedést mutat a szoftveres megjelenítéshez képest.

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

Androidban a Canvas alapértelmezetten hardveres gyorsítást használ API 14+-tól. Összetett grafikához SurfaceView vagy TextureView ajánlott, amelyek külön réteget allokálnak a megjelenítéshez háttérszálban. Ez megakadályozza az UI szál blokkolását intenzív animációnál.

Canvas iOS-ben

Core Graphics — az Apple keretrendszere raszteres és vektorgrafikához, a Canvas megfelelője. A CGContext kontextus metódusokat biztosít vonalak, görbék, gradiensek és árnyékok rajzolásához. SwiftUI-ben a Canvas a Canvas struktúrán keresztül érhető el, amely az iOS 15-ben került hozzáadásra.

A SwiftUI Canvas GraphicsContext-et használ — egy típusbiztos burkolót a Core Graphics fölé. A fejlesztő GraphicsContext-tel dolgozik, amely támogatja a transzformációkat, rétegeket és szimbólumokat. Az UIKit-kel ellentétben a SwiftUI Canvas automatikusan kezeli a Retina kijelzőket és a dinamikus típusokat.

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

A SwiftUI Canvas deklaratív szintaxisával és automatikus megjelenítési optimalizálásával tűnik ki. A keretrendszer maga határozza meg, hogy a vászon mely részeit kell átrajzolni az állapotváltozásnál. A GraphicsContext támogatja a rétegeket a drawLayer metóduson keresztül, ami leegyszerűsíti a többrétegű grafika létrehozását.

Canvas teljesítmény

Canvas teljesítmény három tényezőtől függ: az átrajzolási területtől, a rajzolási hívások számától és a műveletek összetettségétől. Minden rajzolási metódushívás egy parancs, amely áthalad a csővezetéken: a CPU formálja a parancsot, a GPU végzi a raszterizálást.

Az optimalizálás alapszabálya — a hívások számának minimalizálása. Ahelyett, hogy 1000 különálló pontot rajzolna, használjon 1000 szegmensből álló útvonalat — egy stroke() hívás 1000 helyett. A második szabály — statikus elemek gyorsítótárazása: helyezze át a változatlan elemeket offscreen Canvas-ba, és másolja drawImage()-en keresztül.

Profilozó eszközök: Chrome DevTools Performance a webhez, GPU Inspector Androidhoz és Instruments iOS-hez. A Google Chrome Developers (2025) szerint a Canvas teljesítményproblémáinak 70%-át a túlzott átrajzolás és a rétegek gyorsítótárazásának hiánya okozza.

Mobil eszközöknél kritikus az akkumulátor kímélése. A túlzott megjelenítés terheli a GPU-t és csökkenti az üzemidőt. Használja a willBePresented() metódust Androidban és a displayLink-et iOS-ben a képernyő frissítési gyakoriságával való szinkronizáláshoz.

Canvas fejlett lehetőségei

Modern Canvas túllépett az egyszerű 2D megjelenítés keretein. A CanvasContext-en alapuló WebGL lehetővé teszi háromdimenziós grafika megjelenítését hardveres gyorsítással. Az OffscreenCanvas átviszi a nehéz megjelenítést Web Workers-be, anélkül hogy blokkolná az UI szálat.

WebGL Canvas-on keresztül

WebGL egy Canvas kontextus, amely hozzáférést biztosít az OpenGL ES-hez a böngészőből. A fillRect() helyett a fejlesztő shadereket ír GLSL-ben és geometriát tölt be pufferekbe. A Statista (2025) szerint a mobil böngészők 92%-a támogatja a WebGL 2.0-t, ami a Canvas-t a webes játékok és 3D vizualizációk alapjává teszi.

A Canvas mint WebGL tároló leegyszerűsíti a 2D és 3D grafika integrációját egy alkalmazásban. Például a 3D jelenet WebGL-en keresztül jelenik meg, az UI fedvény pedig ugyanazon vászon 2D kontextusán keresztül. Vegyes megjelenítés Z-sorrend kezelését és képkockasebesség szinkronizálást igényel.

OffscreenCanvas

OffscreenCanvas — API a megjelenítés háttérszálba helyezéséhez. A szokásos Canvas-szal ellentétben az OffscreenCanvas nem kötődik a DOM-hoz, és Web Worker-ben használható. Ez lehetővé teszi összetett grafikai számítások párhuzamos végrehajtását a főszállal anélkül, hogy az FPS csökkenne.

A kész képkocka átvitele a Worker-ból a főszálba a transferControlToOffscreen() és commit() segítségével történik. A Chrome Platform Status (2025) szerint az OffscreenCanvas a böngészők 87%-ában támogatott, és intenzív megjelenítésű alkalmazásokhoz ajánlott — grafikus szerkesztők, diagramok és animációk.