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:

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

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

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:

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:

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

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

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

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

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

HTM5 canvas

Curs Html

Desenare cu HTML5, canvas si JavaScript

Adaugare transparenta

Desenare linii

Desenare arce si cercuri

Canvas - Text

Canvas - Umbre

Canvas - Gradient

Adaugare imagini

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month