Canvas in HTML
Folosirea acțiunilor automate în Photoshop
May 18, 2012
Folosirea textului în canvas
June 27, 2012 |
Tutorial publicat și pe E-learn.ro |
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.
