Elementul canvas (nou începând cu HTML5) ne permite să abordăm paginile cu un control mai mare prin desenarea și crearea de grafice în stil SVG pe pagină în timp real cu JavaScript, și oferându-ne capacitatea de a anima și controla mișcarea elementelor noastre. Cu aceste noi abilități, acum este posibil să creați jocuri de browser și pagini extrem de interactive fără folosirea de flash, componente suplimentare sau chiar imagini preexistente (nu că aceasta ar fi cea mai bună abordare în orice situație).
Terminologia și funcțiile integrate sunt concentrate în jurul conceptului de artă și grafică media, inclusiv funcții precum stroke() și fill() printre altele, care vă accelerează capacitatea de a crea o imagine pe ecran fără un fundal detaliat în artele grafice și modelarea matematică.
Fiecare dintre elementele pe care le creăm poate deveni un obiect propriu și poate fi grupat cu mai multe straturi sau elemente ca un singur articol. Browserele care acceptă pot înțelege dimensiunile și relația unui obiect cu alte elemente, aducând un drag-and-drop nativ. Elementele paginii care acceptă glisarea și plasarea pot adăuga atributul de glisare la declarația lor.
Numirea acestui element canvas (”pânză”) este intenționată și oferă o imagine exactă a modului de tratare. Când creăm un set de etichete de canvas și ne setăm lățimea și înălțimea, am „atârnat” efectiv un tablou alb pe „peretele” paginii noastre web. În exemplele noastre de mai jos, vom folosi o serie de valori pentru a determina unde vor fi lucrurile pe care le „pictăm” pe pânză.
Aceasta se face prin utilizarea perechilor de valori sau a coordonatelor X-Y. Colțul din stânga sus al pânzei este întotdeauna (0, 0) — 0 pixeli la dreapta, 0 pixeli în jos. Acesta este diferit de un grafic în care (0, 0) este în mijlocul paginii. Valorile noastre pentru X și Y vor muta punctul nostru de desen în dreapta și în jos pe măsură ce devin mai mari.
În primul nostru exemplu de mai jos, dimensiunea pânzei noastre este 300×300, ceea ce înseamnă că punctul din dreapta jos este (300, 300). Orice valoare mai mare decât aceasta sau punctele cu valori negative, vor muta o parte sau tot desenul nostru din pânză.
Dreptunghiuri
Vom începe direct cu canvas, deoarece este un proces vizual și poate fi foarte distractiv. Pentru a începe, trebuie să creăm un element canvas pe pagina noastră:
<canvas height="300" width="300"> </canvas>
Deși pânza noastră este încă goală, ceea ce am făcut a fost să alocăm un spațiu (la fel ca dimensionarea unui div) pentru a declara ce parte a paginii aparține div-ului nostru. Etichetele de lățime și înălțime pe care le-am furnizat sunt obligatorii de la început și, deoarece nu am definit un decalaj sau nu am plasat pânza într-un alt container, va începe din colțul din stânga sus al paginii noastre, din nou la fel ca un div.
Actul de a desena pe pânza noastră este un proces în mai multe etape. Trebuie să declarăm cum dorim să apară elementul nostru (de exemplu, atributul fillStyle sau strokeStyle), de unde vrem să înceapă și ce tip de linie sau formă intenționăm să creăm (de exemplu, fillRect sau strokeTriangle).
Când declarăm o formă, trebuie să transmitem dimensiunea și locația acesteia. Pentru un dreptunghi, facem acest lucru setând locația sa de pornire (colțul din stânga sus) ca valori X și Y, apoi adăugând lățimea și înălțimea acestuia. Pentru a adăuga un dreptunghi solid la pânza noastră, va trebui să adăugăm ceva JavaScript pe pagina noastră. Întrucât nu am ajuns încă la JavaScript în acest text, nu vă faceți griji dacă nu înțelegeți puțin – vom ajunge și acolo. Deocamdată, concentrați-vă pe înțelegerea a ce poziție a argumentelor este folosită pentru diferite setări.
În antetul paginii noastre, trebuie să adăugăm următorul cod JavaScript, identificând ce element vrem să afecteze și ce vrem să fie desenul:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300"
style="border: 1px solid #c3c3c3;">
Oh no! This browser does not support HTML5 :(
</canvas>
<script>
var canvas=document.getElementById("canvas");
var canvas1=canvas.getContext("2d");
canvas1.fillStyle="#FF0000";
canvas1.fillRect(50, 50, 50, 50);
</script>
</body>
</html>
Salvarea și reîmprospătarea ecranului ar trebui să vă ofere acum un singur dreptunghi singuratic setat puțin în colțul din stânga sus al paginii. S-ar putea să vă întrebați despre linia ”Oh no!” din exemplului nostru. Când pagina noastră se încarcă, conținutul mesajului „Oh, no!” este plasat pe pagina noastră. Când straturile noastre de pânză sunt redate, acest conținut este apoi acoperit. Dacă HTML5 nu este acceptat (sau JavaScript este dezactivat), pânza noastră nu este desenată, lăsând textul original pe care îl putem folosi pentru a spune utilizatorului că ceva nu este în regulă. În declarația noastră de stil de umplere, am folosit o referință de culoare ca valoare hexadecimală. De asemenea, putem folosi un cuvânt de culoare standard, cum ar fi red, sau folosim un apel de funcție care preia o valoare setată de roșu, verde, albastru și opacitate pentru a genera o culoare. În declarația noastră fillRect am definit poziția de pornire din stânga și sus, precum și lățimea și înălțimea acesteia, respectiv fillRect(left, top, width, height). În exemplul nostru inițial, toate valorile au fost 50. Să adăugăm un al doilea dreptunghi care este mai mult lat decât înalt și să-l mutăm mult mai jos în pagina noastră: <!DOCTYPE html>
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300"
style="border: 1px solid #c3c3c3;">
Oh no! This browser does not support HTML5 :(
</canvas>
<script>
var canvas=document.getElementById("canvas");
var canvas1=canvas.getContext("2d");
canvas1.fillStyle="#FF0000";
canvas1.fillRect(50, 50, 50, 50);
canvas1.fillStyle= "rgba(0, 0, 50, 100)";
canvas1.fillRect(50, 200, 100, 50);
</script>
</body>
</html>
Veți observa că, deși acum avem două blocuri, nu trebuie să schimbăm numele pe care le-am folosit atunci când declarăm al doilea dreptunghi față de primul. Asta pentru setăm valorile, apoi apelăm o funcție pentru a desena elementul și nu stochează valorile în scriptul nostru ca obiecte în codul nostru JavaScript.
Țineți minte că desenele noastre pot fi declarate într-o manieră care le extine în exterior sau dincolo de limitele pânzei noastre. Din punct de vedere tehnic, acestea vor fi desenate, totuși pânza nu se va extinde pentru a satisface nevoile desenului dvs. Pentru a vedea acest lucru în acțiune, putem adăuga încă un dreptunghi de aceeași dimensiune ca primul nostru, dar plasați-l astfel încât să ne depășească pânza, astfel încât să vedem doar o parte din el:
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="300"
style="border: 1px solid #c3c3c3;">
Oh no! This browser does not support HTML5 :(
</canvas>
<script>
var canvas=document.getElementById("canvas");
var canvas1=canvas.getContext("2d");
canvas1.fillStyle="#FF0000";
canvas1.fillRect(50, 50, 50, 50);
canvas1.fillStyle= "rgba(0, 0, 50, 100)";
canvas1.fillRect(50, 200, 100, 50);
canvas1.fillStyle = "rgba(20, 20, 20, 20)";
canvas1.fillRect(275, 275, 50, 50);
</script>
</body>
</html>
NOTE ADITIONALE: Rețineți că JavaScript, despre care primim o previzualizare anticipată, ține cont de majuscule și minuscule. Aceasta înseamnă că Canvasl este considerat diferit de canvasl!
Chiar dacă acest ultim dreptunghi este tot 50 pe 50, vedem doar 25×25 din el, partea care se ăncadrează în dimensiunile pânzei noastre. Acum că ne-am jucat cu dreptunghiuri, le vom înlocui cu triunghiuri. De asemenea, le vom face doar chenare fără culoare de umplere. Pentru a face acest lucru, vom defini segmentele de linie care alcătuiesc triunghiul nostru și folosim strokeStyle() în loc de fillStroke().
Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult
Inteligența, de la originile naturale la frontierele artificiale – Inteligența Umană vs. Inteligența Artificială
Istoria paralelă a evoluției inteligenței umane și a inteligenței artificiale este o călătorie fascinantă, evidențiind căile distincte, dar interconectate, ale evoluției biologice și inovației tehnologice. Această istorie poate fi văzută ca o serie de evoluții interconectate, fiecare progres în inteligența … Citeşte mai mult
Facebook pentru afaceri şi utilizatori
Un ghid pentru dezvoltarea profilului propriu al utilizatorilor Facebook, şi pentru promovarea imaginii, produselor şi serviciilor firmei prin paginile de Facebook. Include volumele Ghid Facebook pentru utilizatori și Ghid pagini Facebook – Campanii de promovare pe Facebook. de același autor. … Citeşte mai mult
Lasă un răspuns