Ugrás a fő tartalomra

Bejegyzések

Bejegyzések megjelenítése ebből a hónapból: november, 2013

HTML5 canvas és a Rajzolási állapotok

Végül eljött az idő arra, hogy megírjam ezt a bemutató cikket a canvasról és főleg a rajzolási állapotokról. Viszont a cikk olyan lesz, mint a felső oktatás, csupa elmélet semmi gyakorlat. :D
Viszont fogok majd a cikk végén plusz anyagot berakni és egy feladatot.

Canvas létrehozása:

A canvas ugyan úgy viselkedik, mint bármelyik HTML elem ezért 2 fajta módon lehet létrehozni.

1.statikusan: Ilyenkor egyszerűen csak belefűzzük a HTML dokumentumunkba azt ,hogy(body után):

<canvas id="myCanvas" width="300" height="200"></canvas>

Ebben az esetben kapunk egy 300x200-as méretű canvast.

2.dinamikus: Ebben az esetben JS kód segítségével kreálunk egy canvas elemet, amit aztán beszúrunk a HTML dokumentumunkba.

var canvas = document.createElement('canvas');
canvas.id = "myCanvas";  canvas.width = 300;  canvas.height = 200; document.body.appendChild(canvas);

Először létrehozzuk a canvas elemet, majd beállítjuk az id-jét,  szélességét és mag…