Canvas in HTML5
20.06.2012
Canvas este un tag HTML pe care il putem folosi in interiorul unui document HTML cu scopul de a desena folosind JavaScript. In seria de tutoriale ce va urma pe acest subiect, vom folosi un mic template, pentru a intelege si folosi mai bine notiunile.
5047 afisari 0 Rating (2 voturi) 25 min

In Introducere in HTML5 am prezentat principalele noutati cu care HTML5 a venit vis-à-vis de versiunile anterioare. In continuare vom aprofunda notiunea de canvas si posibilitatile pe care ni le ofera.

Initial canvas-ul a fost creat de Apple, in 2004, pentru a putea implementa widget-urile din dashboard si pentru a suporta grafica in browserul Safari. Ulterior a fost adoptat de Firefox, Opera si Google Chrome, pentru ca in prezent, sa faca parte din specificatille HTML5.

Canvas este un tag HTML pe care il putem folosi in interiorul unui document HTML cu scopul de a desena folosind JavaScript. In seria de tutoriale ce va urma pe acest subiect, vom folosi un mic template, pentru a intelege si folosi mai bine notiunile.

Daca suntem obisnuiti cu un editor precum Adobe Dreamweaver, cand cream un document HTML nou, avem la dispozitie urmatoarea structura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
</body>
</html>

Pentru a ajunge la template-ul de care vorbeam, il modificam corespunzator specificatiile HTML5, adaugam codul necesar canvas-ului si ajungem la urmatoarea varianta:

<!DOCTYPE HTML> 
<html> 
<head> 
    <script> 
        window.onload = function(){ 
            var canvas = document.getElementById("myCanvas"); 
            var context = canvas.getContext("2d"); 
            // aici vom desena 
        }; 
    </script> 
</head> 
<body> 
    <canvas id="myCanvas" width="500" height="300"> </canvas> 
</body> 
</html>

Observam ca elementul canvas este introdus in interiorul elementului body si este definit folosind un id, latime si inaltime. JavaScript foloseste id-ul pentru a putea face legatura cu elementul canvas, iar dimensiunile seteaza suprafata de lucru (in termeni simpli). Odata ce accesam tag-ul canvas cu:

document.getElementById()

putem defini un context 2D folosind:

var context = canvas.getContext("2d");

Bun. Acum sa incercam sa desenam ceva.

Vom incepe cu lucruri simple, si vom incerca sa desenam o linie dreapta. Folosind template-ul de mai sus, ne definim contextul 2D si ne stilizam linia:

window.onload = function(){ 
    // facem referinta catre elementul nostru prin id 
    var canvas = document.getElementById("myCanvas"); 
    // declaram contextul 2D 
    var context = canvas.getContext("2d"); 
    // setam latimea liniei in pixeli 
    context.lineWidth = 5; 
    // setam culoarea liniei 
    context.strokeStyle = "#ff0000";

Ne pozitionam apoi contextul si trasam linia:

// pozitionam cursorul 
    context.moveTo(50, canvas.height - 50); 
    // trasam linia 
    context.lineTo(canvas.width - 50, 50); 
    // facem vizibila linia cu culoarea setata la stroke 
    context.stroke(); 
};

Facem embed la canvas in interiorul elementului body (cu alte cuvinte, introducem canvas-ul si ii dam id-ul si dimensiunile). I-am adaugat si un border pentru a putea repera suprafata canvas-ului.

<body> 
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas> 
</body>

Cand desenam un element anume, precum un path, sub-path sau o forma, este important de stiut ca stilurile pot fi setate oricand (inainte sau dupa ce elementul este desenat), insa trebuiesc aplicate imediat dupa ce elementul este desenat pentru a avea efect. Prin urmare putem seta latimea liniei cu proprietatea lineWidth si culoarea cu proprietatea strokeStyle asa cum, inainte de a desena la propriu pe hartie, ne alegem un creion sau marker de o anumita culoare sau grosime.

Odata alese aceste proprietati putem sa pozitionam markerul nostru pe canvas folosind metoda moveTo():

context.moveTo(x,y);

Pentru a putea folosi aceasta metoda este de mentionat faptul ca in coltul din staga sus, coordonatele sunt (0,0) iar in coltul din dreapta jos ele sunt (canvas.width, canvas.height). Odata ce am pozitionat cursorul, putem desena linia folosind metoda lineTo() prin definirea coordonatelor punctului final.

context.lineTo(x,y);

Si in final, putem folosi metoda stroke() pentru a face linia vizibila. In caz contrar, culoarea implicita va fi negru.

Copyright © 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.