O introducere în lucrul cu panza

Astăzi, veți învăța despre o tehnologie web cunoscută sub numele de Canvas și despre modul în care este legată de modelul Object Document, denumit în mod obișnuit DOM. Această tehnologie este extrem de puternică, deoarece permite dezvoltatorilor web să acceseze și să modifice elementele HTML prin utilizarea JavaScript.

Acum vă puteți întreba de ce trebuie chiar să ne deranjeze cu JavaScript. Pentru a spune pur și simplu, HTML și JavaScript sunt reciproce și interdependente. Unele componente HTML, cum ar fi pânză element, nu sunt nimic fără utilizarea JavaScript. La urma urmei, ce bun este o pânză dacă nu putem să ne folosim de ea?

Pentru a înțelege conceptul, m-am gândit că am putea să lucrăm printr-un exemplu de proiect împreună, în care vom încerca să desenezi o simplă față de zâmbet. Deci, să ne aruncăm cu grijă în ea.

Noțiuni de bază

Mai întâi faceți un nou director pentru a ține fișierele proiectului, apoi mergeți mai departe și deschideți editorul de text preferat sau instrumentul de dezvoltare web. Odată ce ați făcut acest lucru, ar trebui să creați un gol index.html și un gol script.js, pe care vom continua să le modificăm pe măsură ce mergem mai departe.

Apoi, vom trece mai departe pentru a ne modifica index.html, care nu ar trebui să dureze prea mult, deoarece cea mai mare parte a proiectului nostru va fi scrisă în JavaScript. Tot ce trebuie să facem în HTML este crearea unui element de referință și a unei referințe script.js. Este destul de simplu:

Deci, pentru a explica, am folosit un set de etichete pentru ambele  și , și, prin urmare, putem adăuga mai multe elemente în documentul nostru prin intermediul corpului. Profitând de această oportunitate, fac exact acest lucru cu un element de canvas de 640 x 480 cu atributul id = 'panza'.

Acest atribut atașează pur și simplu un șir unui element în scopul identificării și îl vom folosi mai târziu pentru a localiza elementul nostru de canvas în fișierul nostru JavaScript. Apoi am făcut referire la fișierul nostru JavaScript folosind > tag, în care am specificat JavaScript ca tip de limbă și script.js ca calea către fișierul dorit.

Manipularea DOM

După cum implică denumirea modelului Object Model, va trebui să folosim o interfață pentru documentul HTML prin utilizarea unei alte limbi, în acest caz JavaScript. Pentru aceasta, vom avea nevoie de un scurt primer pe obiectul documentului încorporat. Acest obiect corespunde direct cu cel al nostru tag-uri, și, în mod similar, este baza întregului nostru proiect, deoarece îl putem folosi pentru a obține elemente și pentru a împinge schimbări.

var canvas = document.getElementById ("canvas");

Amintiți-vă cum am definit un element de panza cu id = 'panza'? Acum o luam din documentul HTML prin folosirea lui document.getElementById în care pur și simplu trecem șirul care corespunde id-ului elementului dorit. Acum, că l-am apucat, putem începe să o folosim pentru desen.

Pentru a trage cu panza, trebuie să manipulăm contextul. Surprinzător, o pânză nu conține metode sau atribute pentru desen, dar obiectul său context are toate metodele de care avem nevoie. Un context este definit astfel:

var context = canvas.getContext ("2d");

Fiecare pânză are câteva contexte diferite, iar în scopul programului nostru, avem nevoie doar de cel care este bidimensional. Acest context pe care l-am realizat va avea toate metodele de desen care vom avea nevoie pentru a ne crea fata.

Înainte de a începe, trebuie să vă informez că contextul stochează două culori ca atribute, una pentru lovitură și una pentru umplere. Pentru fata noastră zâmbitoare, va trebui să setăm umplutura în galben și stroke la negru.

context.fillStyle = 'galben'; context.strokeStyle = 'negru';

După setarea contextului la culorile dorite, trebuie să trasăm de fapt un cerc pentru față. Din păcate, contextul nu are o metodă predefinită pentru cercuri, așa că va trebui să folosim ceea ce este cunoscut ca o cale. O cale este pur și simplu o serie de linii și curbe combinate și această cale este închisă atunci când desenul a fost finalizat.

context.beginPath (); context.arc (320, 240, 200, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

Deci, pentru a explica, am instruit contextul să înceapă o nouă cale. Apoi, am creat un arc la punctul (320, 240) cu o rază de 200 de pixeli. Ultimele două argumente specifică unghiul inițial și terminalul pentru a construi arcul. Deci, vom trece 0 și 2 * radiali Math.PI pentru a face un cerc complet. În cele din urmă, instruim contextul pentru a umple și cursa calea în funcție de culorile pe care le-am stabilit deja.

Deși închiderea căii nu este o cerință pentru funcționarea scenariului, va trebui să încheiem calea astfel încât să putem începe noi pentru ochii și gura zâmbetului nostru. Ochii se fac exact in acelasi mod, fiecare cu o raza mai mica si o pozitie diferita. Dar mai întâi trebuie să ne amintim să setați culoarea de umplere la alb.

context.fillStyle = 'alb'; context.beginPath (); context.arc (270, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath (); context.beginPath (); context.arc (370, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

Și asta e tot ce se întâmplă cu ochii. Acum, gura este foarte asemănătoare, dar de data aceasta nu vom umple arcul, iar unghiul nostru va fi configurat ca semicerc. Pentru a face acest lucru, va trebui să setăm unghiul de pornire la zero și unghiul de final la -1 * Math.PI. Și rețineți că nu uitați să setați culoarea cursei în roșu.

context.fillStyle = 'roșu'; context.beginPath (); context.arc (320, 240, 150, 0, -1 * Math.PI); context.fill () context.stroke (); context.closePath ();

Felicitări

Buna treaba. Ați făcut-o până la sfârșitul tutorialului și ați realizat o minunată față de zâmbet în timp ce aflați mai multe despre Canvas, HTML, JavaScript și Modelul Obiectului Documentului. Dacă aveți întrebări, nu ezitați să lăsați un comentariu. Faceți clic aici pentru a vedea programul în acțiune.