Una dintre cele mai interesante facilitati cu care vine html5 este elementul canvas. Desenarea libera intr-o pagina web nu este demult ceva nou, dar se cauta atat simplitatea cat si performanta. Desi html5 suporta prin excelenta SVG ( Scalable Vector Graphics), acesta este lent si ofera o abordare deloc potrivita graficii 2D in general.
Canvas (asa cum ii spune si numele) ofera o panza pe care se poate desena folosind JavaScript, emuland comportamentul Java AWT dezvoltat de Sun. Astfel se pot defini si folosi functii care vor desena pe aceasta suprafata, de la elemente simple la cele mai complexe, folosind exclusiv JavaScript si usurand sarcina engine-ului de randare al browserului (spre deosebire de SVG).
In continuare vom analiza un exemplu simplu de folosire a canvas-ului :
Declaram folosirea javascriptului :
<script type=”text/javascript”>
Urmeaza o functie simpla care urmeaza sa deseneze un patrat pe ecran :
function draw (){
var canvas = document.getElementById (‘hello’);
Preluarea contextului, exact ca in Java :
if (canvas.getContext){
var ctx = canvas.getContext(’2d’);
Functie asemanatoare celor din Java AWT, pentru desenarea unui dreptunghi umplut :
ctx.fillRect (25, 25, 50, 50);}}
</script>
Apelam functia draw() chiar de la inceputul afisarii paginii. Asta este tot.
<body onload=”draw ();”>
<canvas id=”hello” width=”100″ height=”100″></canvas>
</body>
Rezultatul (intr-un browser compatibil, cum ar fi Firefox 2.0 sau Apple Safari) ar trebui sa fie :
Functiile disponibile pentru canvas sunt foarte numeroase si permit desenarea diverselor obiecte prin multe abordari diferite. Am aratat deja cum se poate desena un dreptunghi. Voi exemplifica mai jos cateva din functiile cele mai interesante :
beginPath() – moveTo(x,y) – lineTo(x,y) – arc(…) – fill() – endPath()
Aceasta combinatie poate fi folosita pentru a desena orice figura. Prin beginPath() se incepe desenarea. Apoi se pot efectua succesiv lineTo sau arc pentru a obtine linii drepte sau curbe, sau moveTo pentru a “sari” fara a desena nimic. La sfarsit se apeleaza endPath(). Cu fill() se poate umple figura curenta. Exista multe alte combinatii, pentru a obtine efecte grafice avansate, cum ar fi curbe Bezier de exemplu, dar se pot crea desene interesante chiar si cu functiile de baza descrise mai sus.
Image() – drawImage()
Orice desen facut in canvas poate fi tratat ca o imagine, fie creand o imagine noua (new Image() ) fie importand imaginea respectiva dintr-un URI. Ulterior se poate folosi respectiva imagine prin drawImage(), cu sintaxa foarte asemanatoare cu cea din Java AWT : drawImage( imageHandler, x, y).
strokeStyle() – fillStyle()
Aceste functii modifica modalitatea curenta de desenare, ingrosand pensula sau alterand umplerea figurilor.
globalAlpha
Variabila globala este singura modalitate de a modifica transparenta figurilor. Orice desen va folosi valoarea globalAlpha curenta. Prin modificari succesive, se pot obtine diverse efecte de transparenta.
save() – restore()
Functionarea acestei combinatii de functii este deosebit de interesanta, deoarece imita comportamentul functilor push() si pop() din OpenGL. Ele salveaza sau incarca imaginea curenta de pe o stiva de stari, care poate fi folosita pentru desene succesive.
translate() – rotate() – scale()
Continuand asemanarea cu OpenGL, aceste 3 functii scaleaza, translateaza sau rotesc toate figurile desenate ulterior apelarii lor. Efectele lor se pot anula folosind save() si restore() prezentate mai sus.
transform( m11, m12, m21, m22, dx, dy)
Aceasta functie opereaza direct asupra matricii de transformare, pentru eventuale reglaje fine asupra modului cum sunt desenate obiectele. Se pot astfel obtine efecte de skew sau de swirl, de exemplu.
Canvas contine multe alte functii utile in proiecte grafice de orice fel, inclusiv suport pentru umbre, obiecte 3d,
Leave a Comment
No comments yet.
Comments RSS TrackBack Identifier URI
Blogul nostru
