<canvas> este unul din cele mai interesante elemente introduse in HTML5.
Tag-ul <canvas> este destul de simplu, defineste lungimea, inaltimea si un ID unic. Dar se folosesc o serie de instructiuni JavaScript (denumite generic APIs) pentru a desena obiecte in canvas.
Exemplu de mai jos arata structura de baza pentru implementare canvas intr-o pagina web:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Titlu paginii</title> <script type="text/javascript"> function draw() { // preia intr-un obiect tag-ul <canvas> var canvas = document.getElementById("id_canvas"); // daca browser-ul recunoaste canvas if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Aplica instructiuni JavaScript (API canvas) pt. desenare } } // apeleaza functia draw() imediat ce pagina s-a incarcat window.onload = draw; </script> </head> <body> <canvas id="id_canvas" width="200" height="200"></canvas> </body> </html>- Atributele width si height specifica dimensiunile zonei CANVAS in pagina web.
<canvas> este un element de tip bloc, poate fi adaugat in oricare alt tag de tip bloc, precum <p>, <div>, sau in elementele noi de structura introduse in HTML5: <section>, <article>.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Canvas patrat albastru</title> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = '#0101fe'; ctx.fillRect (50, 60, 100, 100); } } window.onload = draw; // acceseaza functia draw() cand pagina s-a incarcat --></script> </head> <body> <canvas width="200" height="200" id="cav1"></canvas> </body> </html>Rezultat:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Canvas transparenta</title> </head> <body> <canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = '#0101fe'; ctx.fillRect (50, 60, 100, 100); ctx.fillStyle = "rgba(220,223,0, 0.5);"; ctx.fillRect (90, 105, 100, 80); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); // apeleaza functia draw() --></script> </body> </html>Rezultat:
lineTo(x, y)Aceasta metoda traseaza o linie de la punctul curent pana la coordonatele (x, y).
moveTo(x, y)- Aceasta metoda creaza, sau muta, punctul de inceput al desenarii, la coordonatele specificate.
<canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // definesste culoarea si grosimea liniei ctx.strokeStyle = '#01da01'; ctx.lineWidth = 3; // creaza prima linie ctx.moveTo(10, 10); // seteaza punctul de inceput ctx.lineTo(100, 80); // defineste linia // creaza a doua linie ctx.moveTo(10, 10); // seteaza punctul de inceput ctx.lineTo(120, 120); // defineste linia // the third line ctx.moveTo(10, 150); // muta punctul de inceput ctx.lineTo(140, 150); ctx.stroke(); // adauga liniile } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); // apeleaza functia --></script>Dupa ce a fost definita culoarea liniei (cu strokeStyle), si grosimea (cu lineWidth), am folosit metoda moveTo() pentru a seta punctul de inceput, apoi cu lineTo(100, 80) se creaza o linie de la acel punct curent pana la punctul dat de coordonatele (100, 80).
arc(x, y, raza, startUnghi, endUnghi, anticlockwise)- Aceasta metoda deseneaza un arc de cerc intre startUnghi si endUnghi, in sens invers orelor de ceas daca argumentul anticlockwise e setat true, daca e false deseneaza in sensul orelor de ceas.
<canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(75,75,50,0,Math.PI*2,true); // Fata ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Gura ctx.moveTo(65,65); ctx.arc(60,65,4,0,Math.PI*2,true); // Ochiul stang ctx.moveTo(95,65); ctx.arc(90,65,4,0,Math.PI*2,true); // Ochiul drept ctx.stroke(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); // apeleaza functia --></script>Desenul incepe cu desenarea fetei, apoi se muta punctul de inceput pentru desenare gura, si traseaza alt arc de cerc, si tot asa pentru fiecare ochi. Functia moveTo() se ocupa de mutarea coordonatelor.
<canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // creaza text cu o culoare de umplere ctx.fillStyle = '#00f'; ctx.font = 'italic 30px sans-serif'; ctx.textBaseline = 'top'; ctx.fillText('Hy everyone', 2, 5); // creaza text afisat doar cu linia de margine a literelor ctx.font = 'bold 30px sans-serif'; ctx.strokeText('Hy everyone', 2, 50); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); // apeleaza functia --></script>Rezultat:
<canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // seteaza proprietatile umbrei ctx.shadowOffsetX = 8; ctx.shadowOffsetY = 8; ctx.shadowBlur = 4; ctx.shadowColor = 'rgba(0, 200, 1, 0.5)'; // defineste si adauga un cerc ctx.fillStyle = '#0000fe'; ctx.arc(75,75,50,0,Math.PI*2,true); ctx.fill(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); // apeleaza functia --></script>Rezultat:
<canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // creaza un obbiect CanvasGradient liniar // furnizand sursa si coordonatele de inceput si sfarsit (x0, y0, x1, y1) var gradient = ctx.createLinearGradient(0, 0, 150, 0); // Se adauga culori in gradient, primul argument specifica pozitia culorii // - se folosesc valori cuprinse intre 0 (gradient start) si 1 (gradient end) // Al doilea argument specifica culoarea, in orice format folosit si in CSS gradient.addColorStop(0, '#f00'); // rosu gradient.addColorStop(0.4, '#ff0'); // galben gradient.addColorStop(0.8, '#0f0'); // verde gradient.addColorStop(1, '#00f'); // albastru // Aplica gradientul la proprietatea fillStyle, si deseneaza un dreptunghi ctx.fillStyle = gradient; ctx.fillRect(0, 0, 200, 125); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); --></script>Rezultat:
<canvas width="200" height="200" id="cav1"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // creaza un obiect CanvasGradient radial // furnizeaza sursa, coordonatele de inceput, sfarsit si razele cercurilor (x0, y0, r0, x1, y1, r1) var gradient = ctx.createRadialGradient(70, 80, 10, 78, 75, 45); // Adauga culori la gradientul radial, la fel ca la cel liniar gradient.addColorStop(0, '#0f0'); gradient.addColorStop(0.5, '#fff'); gradient.addColorStop(1, '#00f'); // Aplica gradientul la proprietatea fillStyle, si deseneaza un cerc ctx.fillStyle = gradient; ctx.arc(75,75,50,0,Math.PI*2,true); ctx.fill(); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); --></script>Rezultat:
drawImage(img_element, dx, dy, dw, dh)- Primul argument, img_element reprezinta o referinta la imagine (obiectul JavaScript cu ea), "dx" si "dy" specifica coordonatele de destinatie in contextul canvas, "dw" si "dh" specifca lungimea si inaltimea imaginii afisate in Canvas (in caz ca doriti sa o redimensionati).
<canvas width="260" height="200" id="cav1"></canvas><br /> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <img src="html_course.jpg" alt="HTML course" width="152" height="160" id="img1" /> <script type="text/javascript"><!-- function draw() { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // obtine un obiect cu imaginea, o adauga in context canvas (cu dimensiuni specificate) var img_elm = document.getElementById('img1'); ctx.drawImage(img_elm, 0, 0, 95, 100); // adauga un text fara culoare de umplere ctx.font = 'bold 25px sans-serif'; ctx.textBaseline = 'top'; ctx.strokeText('HTML Course', 98, 38); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw(); --></script>Rezultat:
<canvas width="121" height="81" id="cav1" onmouseover="draw('#fefe01');" onmouseout="draw('#01de02');" onclick="draw('#fe0708');" style="cursor:pointer;"></canvas> <p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti aceasta zona.</p> <script type="text/javascript"><!-- function draw(clr) { var canvas = document.getElementById('cav1'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // deseneaza un dreptunghi, cu o culoare preluata din parametru "clr" ctx.fillStyle = clr; ctx.fillRect (0, 0, 120, 80); } else { // face vizibil tag-ul cu text pt. no-canvas document.getElementById('no_cav').style.display = 'block'; } } draw('#0102fe'); // apeleaza functia --></script>Proprietatea "fillStyle" foloseste o culoare preluata din parametru "clr", astfel, cand functia e apelata cu o culoare diferita la argument, afiseaza un dreptunghi cu alta culoare.