E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  HTML5 (5)

Canvas in HTML5

20.06.2012
Canvas in 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.

Total vizualizari: 3824 3824 afisari   |   Comentarii  0   |   Rating   |   (2 voturi)   |   Timp necesar: 25 min 25 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Autor: Pustiu Expert
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

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.

Pagina:
1
comenteaza printeaza

Cuvinte cheie:   Tutorial in limba romana HTML5,   canvas,   tag,   HTML5,   javascript

Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(2 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5045
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5000
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4845
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4820
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4620
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Photoshop Bridge Vista SWF CSS Verilog Illustrator XML Gimp Fireworks RoR Powerpoint Outlook Java XHTML MySQL HTML Python Flash Ruby on Rails Excel PSD SEO Lightroom Sony Vegas StyleSheet Word Javascript AJAX JSON Fotografie Swift 3D PHP COREL DRAW Action Script Dreamweaver
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software