A <canvas> elem használata

A <canvas> HTML elem lehetővé teszi, hogy JavaScript segítségével grafikákat jelenítsünk meg közvetlenül a böngészőben. Alkalmas játékok, animációk, vizualizációk és egyéb dinamikus tartalmak létrehozására.

Alap beállítás

A <canvas> elem létrehozása egyszerű. Meg kell adnunk egy szélességet és magasságot, valamint opcionálisan egy stílust, például szegélyt.

A rajz kontextus lekérése

Ahhoz, hogy rajzolni tudjunk, először le kell kérni a rajz kontextust. A legtöbbször a '2d' kontextust használjuk, amit a getContext('2d') metódussal kérhetünk le.

Téglalap rajzolása

A fillRect(x, y, width, height) metódussal egyszerű téglalapot rajzolhatunk. A fillStyle segítségével állíthatjuk be a színt.

Vonal rajzolása

A vonalak rajzolásához a beginPath(), moveTo(), lineTo() és stroke() metódusokat használjuk. Ezekkel kezdő- és végpontok közötti egyeneseket húzhatunk.

Kör rajzolása

A körök rajzolásához az arc() metódust használjuk, amelynek paraméterei a középpont koordinátái, sugár, kezdő- és végszög (radiánban).

Szöveg megjelenítése

A fillText() metódus segítségével egyszerűen szöveget rajzolhatunk a vászonra. A font és fillStyle értékei határozzák meg a stílust.

Egyszerű animáció

Az animációhoz használhatjuk a requestAnimationFrame() metódust. A clearRect() segítségével töröljük a korábbi képkockát, majd újra rajzolunk. Így mozgó objektumokat hozhatunk létre.