Desen forme folosind panza - interfete web API, MDN

Acum, după ce a stabilit panza împrejurimi. se arunca cu capul în noi detalii despre cum să picteze în pânză. Până la sfârșitul acestui articol, veți învăța cum să atragă dreptunghiuri, triunghiuri, linii, arce și curbe, cu condiția că sunteți familiarizați cu forme geometrice de bază. Lucrul cu piese este extrem de important atunci când desen obiecte pe pânză, și vom vedea cum se poate face.

Înainte de a începe de desen, trebuie să vorbim despre grila de pânză sau de coordonate spațiu. Pagina noastră HTML din cadrul anterior a inclus panza element de 150 de pixeli lățime și 150 pixeli. In dreapta se poate vedea panza cu grila. suprapusă în mod implicit. De obicei, 1 unitate de pe grila corespunde cu 1 pixel pe panza. Originea grilei este situată în colțul din stânga sus, la coordonatele (0,0). Toate elementele sunt plasate în raport cu această origine. Din moment ce, poziția colțul din stânga sus al unui pătrat de pixeli albaștri, la stânga x și y pixeli din partea de sus, pe coordonatele (x, y). Mai târziu, în acest tutorial vom vedea cum putem traduce originea într-o altă locație. rotiți grila și chiar la scară. dar acum vom rămâne cu setările de rețea implicite.

Desen dreptunghiuri

În primul rând, ia în considerare dreptunghi. Mai jos sunt cele trei funcții de desen dreptunghiuri in panza:

fillRect (x, y, lățime, înălțime) umplut desen dreptunghi. strokeRect (x, y, lățime, înălțime) a desenului contur dreptunghiular. clearRect (x, y, lățime, înălțime) Purificarea zonei dreptunghiulare, ceea ce face conținutul complet transparent.

Fiecare dintre aceste funcții are mai mulți parametri:

x. y stabili poziția colțului din stânga sus al dreptunghiului în pânza (în raport cu originea);
lățime (W) și înălțimea (altitudinea) determinarea dimensiunilor dreptunghiului.

Mai jos este funcția de tragere (), care utilizează aceste trei funcții.

EXEMPLU crea forme dreptunghiulare

Acest exemplu este prezentat mai jos.

Funcția fillRect () desenează un pătrat negru mare cu latura de 100 px. clearRect () funcția taie centrul pătrat al funcției strokeRect () 60x60 și creează un contur dreptunghiular pixeli într-un pătrat 50x50 purificată.

Pe pagina următoare, considerăm două clearRect metodă alternativă (), și, de asemenea vedea cum puteți schimba culoarea și stilul formelor de contur afișate.

Spre deosebire de funcția de a crea contururi, care vor fi discutate în secțiunea următoare, toate cele trei opțiuni pentru a crea un dreptunghi afișat imediat pe pânză.

circuite de desen (cale)

Restul formelor primitive sunt create circuite. Contur - un set de puncte care se conectează la segmentele de linie pot forma o varietate de forme, curbate sau nu, diferite lățimi și culori diferite. Circuit (sau subcalea) pot fi închise.

Crearea de forme folosind contururi apare într-o serie de pași importanți:

Mai întâi, creați circuit.
Apoi, folosind comenzile de desenare. desen de circuit.
Apoi închide bucla.
Creați o cale, o puteți umple cercul sau să-l afișeze.

Aici sunt caracteristicile care pot fi utilizate în etapele descrise:

beginPath () Creează un nou circuit. După crearea folosit în continuare în construirea instrucțiunilor de desen bucle. Metode Path metode de stabilire diferite contururi obiect. closePath () închide circuitul. astfel încât viitoarele comenzi re-desen trimis context. accident vascular cerebral () atrage o formă pe partea exterioară a cursei. umple () atrage un interior de formă umplut.

Primul pas în crearea unui contur este de a apela funcția beginPath (). În interiorul conține contururi ca un set de sub-circuite (linii, arce, etc.), care formează împreună forma figurii. Fiecare apel la această metodă șterge setul, și putem începe să desenați noi forme.

Notă: în cazul în care calea de curent este gol (de exemplu, după apelarea beginPath () sau pe pânză nou create), prima construcție profil de comandă este întotdeauna funcționează MoveTo (). Prin urmare, putem seta întotdeauna poziția inițială contur desen după resetare.

Al doilea pas este de a apela metodele vederi definite de cale pe care doriți să atragă. Acestea vor fi luate în considerare mai târziu.

Al treilea și etapa opțională - este o provocare closePath (). Această metodă încearcă să închidă forma prin tragere la o linie dreaptă de la punctul curent la început. În cazul în care cifra a fost deja închisă sau este pur și simplu un punct, atunci funcția nu face nimic.

Notă: Atunci când apelați umple (). atunci fiecare figură deschisă se închide automat, astfel încât să nu puteți utiliza closePath (). Această situație nu apare în cazul unui accident vascular cerebral apel ().

triunghi tragerea la sorți

De exemplu, pentru a desena un cod de triunghi va arata ceva de genul:

Rezultatul arată astfel:

Vei observa diferența dintre un triunghi căi pline și încercuite. Acest lucru este, așa cum sa menționat mai sus. datorită faptului că cifra este închisă în mod automat. când calea este umplută (e ex.,. supravopsit). dar nu și atunci când a subliniat (de ex. e. buclă încercuite). Dacă nu luăm în considerare closePath () pentru triunghiul conturat. atunci ar fi fost trase doar două linii, nu un triunghi complet.

Pentru arce și cercuri de desen, metode de utilizare cu arc () și arcTo ().

arc (x, y, raza, startAngle, endAngle, antiorar) Desenați un arc cu un centru la punctul (x, y) de raza r. deoarece unghiul de startAngle și se termină vendAngle într-o direcție invers acelor de ceasornic invers acelor de ceasornic (implicit în timp ce se deplasează în sens orar). arcTo (x1, y1, x2, y2, rază) Desenați un arc cu un punct de referință predeterminat și raza, care leagă aceste puncte printr-o linie dreaptă.

Să aruncăm o privire mai atentă la metoda cu arc (). care are cinci parametri: x și y - coordonatele centrului cercului, unde arcul este tras. Raza - este auto-explicativ. Unghiuri startAngle și endAngle definesc punctele de început și de sfârșit ale arcului în radiani curba pe circumferință. Count este derivat de la axa x. Parametru antiorar - valoare boolean care, dacă este adevărat. apoi desenarea arcului se face invers acelor de ceasornic; în caz contrar pictura se face în sensul acelor de ceasornic.

Următorul exemplu este un pic mai complicat decât am considerat anterior. Există 12 arce diferite sunt desenate cu unghiuri diferite și umple.

Două din pentru bucla este plasată arc în coloane și rânduri. Pentru fiecare arc, vom începe o nouă cale, provocând beginPath (). În acest cod, fiecare din opțiunea arc pentru claritate stabilită într-o variabilă, dar nu trebuie să facă acest lucru în proiecte reale.

Coordonatele x și y ar trebui să fie suficient de clare. rază și startAngle - fixe. endAngle începe cu 180 de grade (jumătate cerc) în prima coloană, și creșterea în trepte de 90 de grade, întreaga circumferință culminează în ultima coloană.

Setarea sensul acelor de ceasornic determină rezultatul, în prima și a treia linii de desen arce are loc într-sensul acelor de ceasornic, iar cea de a doua și a patra în sens antiorar. Ca urmare, dacă condiție jumătatea superioară a arcurilor formate de contur (accident vascular cerebral), iar jumătatea inferioară a arcurilor de turnare.

Notă: Acest exemplu necesită un pic mai mult pânză (canvas), decât celelalte pe aceasta pagina: 150 x 200 pixeli.

dreptunghiuri

Toate aceste metode le-am văzut în dreptunghiurile de tragere. care desena dreptunghiuri imediat în pânză, există, de asemenea, o metodă de RECT (). care nu este arătat, și adaugă numai la bucla de desen (calea) specificat dreptunghi la ultimul circuitul deschis.

RECT (x, y, lățime, înălțime)
Adaugă un traseu dreptunghi colțul din stânga sus este specificată utilizând (x, y), cu înălțimea și lățimea dvs.

Când această metodă se numește numită automat MoveTo (), metoda cu parametri (x, y). Cu alte cuvinte, poziția cursorului este setat la începutul dreptunghiului adăugat.

Creați combinații

Până în prezent, în fiecare caz, vom folosi doar un singur tip de funcții de circuit pentru fiecare formă.
Cu toate acestea, nu există restricții privind numărul sau tipurile de circuite care pot fi utilizate pentru a crea forme. Să ne unim în acest exemplu, toate aceste circuite funcționează pentru a crea un set de caractere de joc foarte faimos.

Imaginea finală arată astfel:

Nu vom trece peste acest lucru în detaliu, deoarece este de fapt surprinzător de simplu. Cele mai importante lucruri de reținut sunt utilizarea proprietății asupra contextului stil de fișier de desen, precum și utilizarea unei funcții de utilitate (în acest caz roundedRect ()). Utilizarea funcțiilor de utilitate pentru biți de desen ai face de multe ori pot fi foarte utile și pentru a reduce cantitatea de cod care aveți nevoie, precum și complexitatea acestuia.

Vom arunca o privire la stil de completare. mai în detaliu, mai târziu în acest tutorial. Aici, tot ce facem este folosindu-l pentru a schimba culoarea de umplere pentru pistele de culoarea implicită de la negru la alb, și apoi înapoi din nou.

obiecte Path2D

Așa cum am văzut în ultimul exemplu, poate exista o serie de căi și desen comenzi pentru a desena obiecte pe panza. Pentru a simplifica codul și pentru a îmbunătăți performanța, obiectul Path2D, disponibil în versiunile recente ale browserelor, vă permite să cache sau pentru a înregistra aceste comenzi de desenare. Aveți posibilitatea de a reda căile rapid.
Să vedem cum putem construi un obiect Path2D:

Toate metodele de cale, cum ar fi MoveTo, RECT, arc, quadraticCurveTo, și așa mai departe, care știm deja, sunt disponibile pentru obiecte Path2D

Path2D API adaugă, de asemenea, o modalitate de a combina căi folosind metoda addPath. Acest lucru poate fi util atunci când doriți să obiecte construite din mai multe componente, de exemplu.

Path2D.addPath (cale [, transforma]) Adaugă o cale spre calea de curent cu o matrice de transformare opțională.

exemplu Path2D

În acest exemplu, vom crea un dreptunghi și un cerc. Ambele sunt stocate ca un obiect Path2D, astfel încât acestea să fie disponibile pentru utilizare ulterioară. Cu noul API Path2D, mai multe metode a fost actualizat pentru a accepta un obiect opțional Path2D de a folosi în loc de calea curentă. Aici, accident vascular cerebral și de umplere sunt utilizate cu un argument cale pentru a trage ambele obiecte pe pânză, de exemplu.