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

<canvas id='id_canvas' width='200' height='200'></canvas>

<script>
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()
draw();
</script>
- 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 inline, poate fi adaugat in oricare 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.

<h4>Exemplu desenare patrat in canvas</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = '#0101fe';
 ctx.fillRect (50, 60, 100, 100);
 }
}

draw(); // calls the draw() function
</script>
- Sintaxa:

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

<h4>Canvas - culoare cu transparenta</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
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);
 }
}

draw(); // calls the draw() function
</script>

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.

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

<h4>Exemplu canvas desenare linii</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // define line color and width
 ctx.strokeStyle = '#01da01';
 ctx.lineWidth = 3;

 // create the first line
 ctx.moveTo(10, 10); // sets the start point
 ctx.lineTo(100, 80); // define a line till these coordinates

 // create the second line
 ctx.moveTo(10, 10); // sets the start point
 ctx.lineTo(120, 120); // define a line till these coordinates

 // the third line
 ctx.moveTo(10, 150); // moves start point
 ctx.lineTo(140, 150);

 ctx.stroke(); // draw the strokes
 }
}

draw(); // calls the draw() function
</script>

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

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.

<h4>Exemplu canvas - arce si cercuri</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
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); // Face
 ctx.moveTo(110,75);
 ctx.arc(75,75,35,0,Math.PI,false); // Mouth
 ctx.moveTo(65,65);
 ctx.arc(60,65,4,0,Math.PI*2,true); // Left eye
 ctx.moveTo(95,65);
 ctx.arc(90,65,4,0,Math.PI*2,true); // Right eye
 ctx.stroke();
 }
}

draw();
</script>

Canvas - Text

Sunt doua metode pentru adaugare text in canvas:


Pentru text se pot folosi urmatoarele proprietati la obiectul context:
- Exemplu:
<h4>Exemplu text in canvas</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // create text with fill color
 ctx.fillStyle = '#00f';
 ctx.font = 'italic 30px sans-serif';
 ctx.textBaseline = 'top';
 ctx.fillText('Hy everyone', 2, 5);

 // create text without fill color
 ctx.font = 'bold 30px sans-serif';
 ctx.strokeText('Hy everyone', 2, 50);
 }
}

draw();
</script>

Canvas - Umbre

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


- Urmatorul cod deseneaza o sfera albastra, cu o umbra galbuie avand transparenta 0.5:
<h4>Exemplu canvas - umbra</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // sets shadow properties
 ctx.shadowOffsetX = 8;
 ctx.shadowOffsetY = 8;
 ctx.shadowBlur = 4;
 ctx.shadowColor = 'rgba(200, 200, 1, 0.5)';

 // define and add a circle
 ctx.fillStyle = '#0000fe';
 ctx.arc(75,75,50,0,Math.PI*2,true);
 ctx.fill();
 }
}

draw();
</script>

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:


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():
<h4>Exemplu canvas - Gradient</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // create a Linear CanvasGradient object
 // provide the source, the start and end (x0, y0, x1, y1) coordinates
 var gradient = ctx.createLinearGradient(0, 0, 150, 0);

 // Now add colors in your gradient, the first argument tells the position for the color
 // - accepted value range is from 0 (gradient start) to 1 (gradient end)
 // The second argument tells the color you want, using the CSS color format
 gradient.addColorStop(0, '#f00'); // red
 gradient.addColorStop(0.4, '#ff0'); // yellow
 gradient.addColorStop(0.8, '#0f0'); // green
 gradient.addColorStop(1, '#00f'); // blue
 

 // Apply the gradient to fillStyle property, and draw an rectangle
 ctx.fillStyle = gradient;
 ctx.fillRect(0, 0, 200, 125);
 }
}

draw();
</script>
  2) Exemplu cu createRadialGradient():
<h4>Exemplu canvas - Gradient cu createRadialGradient()</h4>

<canvas width='200' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // create a Radial CanvasGradient object
 // provide the source, the start, end and radius (x0, y0, r0, x1, y1, r1) of the circles
 var gradient = ctx.createRadialGradient(70, 80, 10, 78, 75, 45);

 // Adding colors to a radial gradient is the same as adding colors to linear
 gradient.addColorStop(0, '#0f0');
 gradient.addColorStop(0.5, '#fff');
 gradient.addColorStop(1, '#00f');
 

 // Apply the gradient to fillStyle property, and draw an circle
 ctx.fillStyle = gradient;
 ctx.arc(75,75,50,0,Math.PI*2,true);
 ctx.fill();
 }
}

draw();
</script>

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.
<h4>Exemplu canvas - imagine</h4>

<canvas width='280' height='200' id='cav1'></canvas>

<script>
function draw() {
 var canvas = document.getElementById('cav1');

 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // create an object with the image, then adds it in canvas context (resizing it)
 var img = new Image();
 img.src ='html/html_course.jpg';
 ctx.drawImage(img, 0, 0, 95, 100);

 // add a text without fill color
 ctx.font = 'bold 25px sans-serif';
 ctx.textBaseline = 'top';
 ctx.strokeText('HTML Course', 100, 38);
 }
}

draw();
</script>
• Elementul <canvas> poate fi si interactiv, sa raspunda la actiunile utilizatorului, efectuate cu mouse-ul sau tastatura.
- In urmatorul exemplu se folosesc evenimentele: 'mouseenter', 'mouseleave', si 'click' pentru a schimba culoarea unui dreptunghi in <canvas>.

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.

<h4>Exemplu canvas - evenimente</h4>
<p>Pozitionati mouse-ul deasupra dreptunghiului si apasati click pe el.</p>

<canvas width='125' height='85' id='cav1'></canvas>

<script>
var canvas = document.getElementById('cav1');

//receives the color
function draw(clr){
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 // draw a rectangle, using a fill color defined in 'clr' parameter
 ctx.fillStyle = clr;
 ctx.fillRect (0, 0, 120, 80);
 }
}

draw('#0102fe');

//register events that call draw() with desired color
canvas.addEventListener('mouseenter', (ev)=>{
 draw('#fefe01');
});
canvas.addEventListener('mouseleave', (ev)=>{
 draw('#01de02');
});
canvas.addEventListener('click', (ev)=>{
 draw('#fe0708');
});
</script>
Sunt mai multe proprietati si metode JavaScript pentru Canvas. O documentatie completa cu acestea gasiti la pagina HTML Canvas 2D Context.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
HTM5 canvas

Last accessed pages

  1. Curs complet de limba engleza, incepatori (6441)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (70064)
  3. Trecutul simplu - Exercitii si teste incepatori (9221)
  4. Formatare text in pagina html (14929)
  5. Sterge / Obtine valori duplicate din Array - Resetare chei (92)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2383)
  2. Curs HTML gratuit Tutoriale HTML5 (1704)
  3. Curs si Tutoriale JavaScript (1671)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1620)
  5. Curs CSS Online Tutoriale CSS3 (1502)