Referat de laborator nr. 12

Canvas

JavaScript poate fi folosit pentru a desena linii, umbre, text, imagini în elementul HTML canvas. Creăm

un document HTML, numit Canvas.html:

La linia 8 am creat un element canvas, căruia i-am dat o proprietate id, pe care o vom folosi pentru a

selecta elementul din cod. Proprietățile width (lățime) și height (înălțime) setează dimensiunile

elementului canvas în pixeli (ambele sunt setate la 200).

La linia 10 se selectează elementul canvas folosind document.getElementById("canvas").

Metoda getElementById returnează un obiect DOM ce reprezintă elementul cu id-ul furnizat. Acest

obiect este atribuit variabilei canvas prin codul de la linia 10.

La linia 11 obținem contextul pentru desen al elementului canvas. Un astfel de context pentru desen

este un obiect JavaScript ce include toate metodele și proprietățile pentru a desena pe o pânză. Pentru a

obține acest obiect, apelăm getContext pentru canvas cu argumentul șirul "2d". Acest argument

spune că vrem să desenăm o imagine bi-dimensională în canvas. Salvăm acest context în variabila ctx

folosind codul de la linia 11.

La linia 12 am creat o buclă for ce merge de la 0 la 8. În interiorul acesteia, la linia 13 desenăm mai multe

dreptunghiuri apelând metoda fillRect pe contextul pentru desen. Această metodă primește 4

argumente și anume, coordonatele x și y ale colțului stânga sus ale dreptunghiului și lățimea și înălțimea

acestuia (10, 10). Pozițiile x și y ale colțului stânga sus pentru fiecare pătrat sunt obținute folosind

variabila i din buclă. Prima dată, când i este 0, coordonatele sunt (0, 0), apoi când i este 1 coordonatele

sunt (10, 10) ș.a.m.d. Atunci când rulați codul, ar trebui să vedeți mai multe pătrate mici negre pe

diagonală:

Exercițiul 1:

Modificați codul dat (mai sus, în scriptul din Canvas.html) pentru a desena următorul robot (puteți folosi

6 dreptunghiuri separate):

Implicit, atunci când este apelată metoda fillRect, JavaScript desenează un dreptunghi negru. Pentru

a folosi o altă culoare, se poate schimba proprietatea fillStyle:

Exercițiul 2:

Folosind link-ul https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/ găsiți 4 culori

preferate și desenați apoi 4 dreptunghiuri folosind culorile alese. Fiecare dreptunghi să aibă 50 pixeli

lățime și 100 pixeli înălțime și nu includeți spații între ele.

Metoda fillRect desenează un dreptunghi plin. Pentru a desena doar schița (outline) unui dreptunghi

se folosește metoda strokeRect, care primește aceleași argumente ca la fillRect. Se folosește

proprietatea strokeStyle pentru a schimba culoarea liniei dreptunghiului, iar pentru a schimba

grosimea acesteia se folosește proprietatea lineWidth :

Liniile în canvas se numesc căi (paths). Pentru a desena o cale, se folosesc coordonatele x și y pentru a

seta unde începe și se termină fiecare linie. De exemplu, următorul cod desenează un X:

Întâi am setat culoarea și grosimea liniei, apoi am apelat metoda beginPath pentru a începe desenarea.

Metoda moveTo primește două argumente, coordonatele x și y de unde începem să desenăm. Metoda

lineTo desenează o linie până la argumentele primite. Metoda stroke afișează liniile pe ecran.

Exercițiul 3:

Desenați omulețul din figură folosind metodele beginPath, moveTo, lineTo și stroke.

Puteți folosi metoda strokeRect pentru cap (un pătrat de 20x20 pixeli). Grosimea liniei este de 4 pixeli.

Echivalentul lui fillRect pentru căi este fill. De exemplu următorul cod desenează o casă de

culoarea SkyBlue, :

Pentru a desena cercuri și arcuri se folosește metoda arc. Pentru a desena un cerc, se setează

coordonatele centrului cercului și raza. Unghiurile de start și de final sunt măsurate în radiani (un cerc

începe de la 0 și ajunge la 2 x π radiani).

De exemplu, următorul cod creează un sfert de cerc, un semicerc și un cerc:

Primul bloc de cod desenează un sfert de cerc. După apelul metodei beginPath, apelăm metoda arc.

Setăm centrul cercului la punctul (50, 50) și raza de 20 pixeli. Unghiul de început este 0, iar unghiul de final

este Math.PI / 2 (adică numărul pi în JavaScript):

Ultimul argument este false, adică metoda arc va desena în sensul acelor de ceasornic. Dacă doriți să

desenați în sensul invers acelor de ceasornic, atunci argumentul final al metodei arc este true.

Al doilea bloc de cod desenează un semicerc. Centrul acestuia are coordonatele (100, 50) și raza de 20

pixeli. De asemeni, se începe de la 0 grade și se termină la Math.PI, desenând astfel un semicerc:

Ultimul bloc de cod desenează un cerc întreg. Centrul acestuia are coordonatele (150, 50) și raza de 20

pixeli. Pentru acest cerc am început de la 0 radiani și am terminat la Math. PI * 2 radiani, desenând astfel

un cerc întreg:

Pentru a desena mai multe cercuri putem realiza o funcție circle:

Exercițiul 4:

Modificați funcția circle pentru a umple cercurile adăugând al patrulea argument de tip boolean care

să spună dacă cercul este umplut (filled) sau doar schițat (outlined). Folosind funcția astfel modificată

desenați omul de zăpadă din figură, care are și cercuri pline: