Tutorial HTM5 canvas

<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.
- Important este ID-ul (aici "id_canvas"), acesta se foloseste in JavaScript ca sa fie preluat tag-ul <canvas> intr-un obiect (cu document.getElementById('ID')), apoi se aplica functii si proprietati specifice pentru a crea desene care sunt afisate in tag-ul CANVAS.
- Metoda getContext('2d') trebuie aplicata la elementul Canvas ca sa se obtina un obiect la care se aplica instructiuni API pentru crearea continutului din <canvas>.

<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>.

Desenare cu HTML5, canvas si JavaScript

Instructiunile JavaScript permit dezvoltatorilor de pagini web sa deseneze diferite forme, linii, sa aplice culori, transparenta si gradient, sa adauge text si imagini in Canvas; chiar sa creeze animatie.
- Exemplu urmator deseneaza un patrat albastru.

<!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:

- Sintaxa:

ctx.fillStyle = "Culoare" - reprezinta culoarea din interiorul formei. Se poate folosi orice metoda de definire a culorii utilizata in CSS (blue, #0000ff, #00f, sau rgb(0,0,255) ).
- Daca nu se specifica o culoare, va fi aplicat negru.
ctx.fillRect(X-stanga, Y-sus, lungime, inaltime) - Deseneaza patrulaterul in canvas, folosind cloarea din "fillStyle".

Puteti crea desene mult mai complexe, combinand cercuri, linii, patrulatere, gradient, transparenta.
- Deoarece multi utilizatori inca folosesc browser care nu recunoaste elementul CANVAS, puteti adauga un text cu un mesaj de eroare pt. no-canvas, intr-un tag ascuns (cu style="display:none;"), iar cu JavaScript faceti acest tag vizibil in cazul cand browser-ul nu recunoaste elementul canvas.

- Daca adaugati codul JavaScript dupa tag-ul <canvas>, nu mai e necesar window.onload, doar apelati simplu functia cu API-uri pt. canvas. Veti vedea in exemplele urmatoare.

Adaugare transparenta

Ca sa adaugati transparenta, definiti culoarea folosind formula: rgba(Red, Green, Blue, Alpha). "Alpha" e o valoare intre 0 si 1 care reprezinta transparenta.
In urmatorul exemplu adaugam un dreptunghi cu Alpha 0.5. In acest caz definim culoarea din "fillStyle" pentru dreptunghi folosind rgba() pentru a specifica valoarea de transparenta ( rgba(220, 223, 0, 0.5) ).
De aseemenea, va fi adaugat un mesaj pt. no-canvas, iar codul JavaScript e scris sub tag-ul <canvas> (pt. a nu mai folosi window.onload).

<!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:

Desenare linii

Ca sa desenati linii se foloseste functia lineTo().

lineTo(x, y)

Aceasta metoda traseaza o linie de la punctul curent pana la coordonatele (x, y).
Pentru a seta sau muta punctul curent de inceput, se foloseste metoda moveTo().

moveTo(x, y)

- Aceasta metoda creaza, sau muta, punctul de inceput al desenarii, la coordonatele specificate.

Ca sa definiti culoarea liniei, se foloseste: ctx.strokeStyle = "culoare";
Pentru grosimea liniei (in pixeli), se foloseste: ctx.lineWidth = valoare;

Urmatorul exemplu creaza trei linii.

<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).
Acum, ultimul punct devine punctul curent de inceput, pentru a-l muta, se foloseste iar meoda moveTo().
Codul de mai sus va afisa aceste trei linii (intr-un browser Canvas-compatibil):

Desenare arce si cercuri

Pentru a desena arce de cerc si cercuri, se foloseste functia arc().

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.
• Ca sa desenati un crc, setati: startUnghi=0, endUnghi=Math.pi*2

Dupa ce ati definit arc-ul de cerc (sau cercul) cu metoda arc(), aplicati:
ctx.stroke(); - ca sa desenati linia de margine.
ctx.fill(); - ca sa adaugati culoarea de umplere.

Urmatorul cod deseneaza o fata zambitoare.

<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.
Rezultat:

Canvas - Text

Sunt doua metode pentru adaugare text in canvas:

fillText(text, x, y) - adauga textul la pozitia specificata, avand culoarea din fillStyle.
strokeText(text, x, y) - adauga textul la pozitia specificata, dar fara culoare de umplere, doar cu linia de margine a literelor, avand culoarea din strokeStyle.

Pentru text se pot folosi urmatoarele proprietati la obiectul context:

ctx.font = valoare - Specifica fontul textului, la fel ca proprietatea font-family din CSS.
ctx.textAlign = valoare - Specifica alinierea pe orizontala a textului, valori: "start", "end", "left", "right", "center" (default e "start").
ctx.textBaseline = valoare - Specifica alinierea pe verticala a textului, valori: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default e "alphabetic").

Exemplu:

<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 - Umbre

Instrctiunile JavaScript pentru umbre contin proprietati care se aplica la obiectul context:

ctx.shadowColor = valoare - Seteaza culoarea umbrei.
ctx.shadowBlur = valoare - Seteaza "blur" la umbra, in pixels. Cu cat valoarea e mai mica, umbra e mai ascutita.
ctx.shadowOffsetX = valoare - Specifica distanta X, in pixeli.
ctx.shadowOffsetY = valoare - Specifica distanta Y, in pixeli.

Urmatorul cod deseneaza o sfera albastra, cu o umbra verde avand transparenta 0.5:

<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 - Gradient

Pentru a crea culoare gradient in Canvas, se aplica un obiect CanvasGradient la proprietatile fillStyle sau /si strokeStyle.
Se pot crea doua tipuri de obiect CanvasGradient, utilizand una din urmatoarele metode:

gradient = context.createLinearGradient(x0, y0, x1, y1) - Returneaza un obiect CanvasGradient ce reprezinta un gradient liniar, care incepe de la punctul (x0, y0) si se termina la punctul (x1, y1).
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) - Returneaza un obiect CanvasGradient ce reprezinta un gradient radial, ca un con cu cercul mic dat de (x0, y0, re), iar cercul mare definit de (x1, y1, r1).

Dupa ce ati creat obiectul pentru gradient, puteti adauga culori in gradient, cu metoda addColorStop() aplicata acestui obiect. Urmatoarele doua coduri arata cum puteti crea si folosi gradient.
1) Exempu cu createLinearGradient():

<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:

2) Exemplu cu createRadialGradient():

<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:

Adaugare imagini

Pentru a adauga o imagine in <canvas>, se foloseste metoda drawImage(). E o functie complexa, care foloseste trei, cinci, sau noua argumente.
Iata sintaxa cu cinci argumente:

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).
- Varianta cu noua argumente se foloseste cand doriti sa adaugati o portiune decupata din imagine. Contine inca patru argumente care definesc suprafata decupata (x0, y0, x1, y1).

In urmatorul exemplu adaugam aceasta imagine: Curs HTML

intr-un <canvas> (redimensionand-o), si un text langa ea.

<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:

• Elementul <canvas> poate fi si interactiv, sa raspunda la actiunile utilizatorului, efectuate cu mouse-ul sau tastatura.
- In urmatorul exemplu se folosesc evenimentele: "onmouseover", "onmouseout", si "onclick" pentru a schimba culoarea unui dreptunghi in <canvas>.

<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.
Ca sa vedeti efectul, pozitionati mouse-ul deasupra dreptunghiului si apasati click pe el.

Sunt mai multe proprietati si metode JavaScript pentru Canvas. O documentatie completa cu acestea gasiti la pagina HTML Canvas 2D Context.- Lectia 20

HTML5 - Elemente si ... <<-- Anterior ----------- Urmator -->> Coduri pt culori

Curs realizat de MarPlo

Curs HTML

Tutorial HTM5 canvas

Desenare cu HTML5, canvas si JavaScript

Adaugare transparenta

Desenare linii

Desenare arce si cercuri

Canvas - Text

Canvas - Umbre

Canvas - Gradient

Adaugare imagini

Index Lectii / Tutoriale