Pregătirea pentru desen
Pentru a începe să creați, trebuie să creați panza însăși și să conectați scriptul la acesta.
Specificați dimensiunile panzei, precum și identificatorul. Este necesar pentru a lega pânza cu scenariul, pe care îl facem acum:
Să scriem această linie în câmpul variabil, va permite să desenați în interiorul panzei folosind diverse metode. Deci, acum putem trece la tentative de desen. Pentru comoditate, voi face fundalul pânzei galbene, nu albe, astfel încât toate liniuțele să fie clar vizibile.
Exemplul 1 - dreptunghi fără umplere
Acum avem un câmp variabil și se pot desena diverse metode în interiorul containerului de pânză. Mai întâi, puteți ajusta grosimea liniei, precum și culoarea acesteia, aceasta se face utilizând următoarele linii:
field.lineWidth = 4;
field.strokeStyle = '# 173045';
Excelent, parametrii sunt setați. Acum este important pentru noi să înțelegem cum are loc desenul. Apare pe baza acestui principiu: există o coordonată x. începe de la începutul pânzei și se mișcă spre dreapta și există o coordonată y. de asemenea, începe la începutul containerului, dar coboară. Pentru a realiza acest lucru mai bine, uita-te la această imagine:
Și cum tragi un dreptunghi? La început, coordonatul x offset este întotdeauna specificat. și apoi după y. După setarea acestei poziții inițiale, trebuie doar să specificați lățimea și înălțimea dreptunghiului. Mai întâi lățimea și apoi înălțimea. Aratam:
field.strokeRect (80, 90, 120, 70);
rezultat:
Aici primul parametru din paranteze este offsetul în x, al doilea este offsetul, al treilea este lățimea și al patrulea este înălțimea. Toate acestea sunt suficiente pentru a vă aminti să desenați dreptunghiuri.
Exemplul 2 - un dreptunghi cu umplutură
În acest caz, totul se face în același mod, numai numele metodei se schimbă:
field.fillStyle = '# 173045';
field.fillRect (50, 50, 130, 85);
Metoda fillStyle vă permite să definiți culoarea de umplere. Am eliminat dreptunghiul nostru trecut, noul aratând astfel:
După cum puteți vedea, toți cei 4 parametri sunt setați în aceeași ordine. Dacă resetați primele două valori, dreptunghiul va fi desenat în colțul din stânga sus al pânzei.
Exemplul 3 - forme de linie și complexe
După cum înțelegeți, metodele descrise mai sus nu sunt potrivite pentru a crea figuri complexe. Să ne întoarcem pe triunghiul pânzei. Nu este la fel de dificilă cum ar părea la prima vedere.
Metoda beginPath () este necesară pentru a arăta începutul desenării unei forme arbitrare. Metoda moveTo () stabilește coordonatele inițiale pentru desen. După cum știți, el are doi parametri - coordonatele x și y. Deci, pentru a vă pregăti pentru a desena o figură complexă, aveți nevoie de următoarele linii de cod:
field.beginPath ();
field.moveTo (30, 30);
De exemplu, voi începe să desenați un triunghi dintr-un punct de 30 de pixeli în dreapta și în partea de jos a colțului din stânga sus al pânzei. Desenarea se face folosind linii, metoda lineTo ():
field.beginPath ();
field.moveTo (30, 30);
field.lineTo (150, 100);
field.lineTo (250, 30);
field.closePath ();
field.lineWidth = 3;
field.strokeStyle = 'argint'
field.stroke ();
Aici am construit o mulțime de cod, dar acum voi explica totul în timp ce privesc rezultatul:
După cum puteți vedea, este un triunghi destul de mare. Am tras o linie de la punctul de pornire până la punctul final, care se află în coordonatele indicate: 150 de pixeli de la începutul pânzei de-a lungul axei x și 100 de la început până la y. Toate coordonatele sunt indicate în raport cu marginea superioară stângă a pânzei și nu cu locul în care sa terminat linia. Amintiți-vă acest lucru, deoarece simplifică imediat înțelegerea și vă puteți imagina deja rezultatul din cap.
De fapt, metoda closePath () completează desenul formei, specificăm-o după ultima linie trasată. Alți parametri:
lineWidth = 3; - grosimea liniei este de 3 pixeli;
strokeStyle = "argint"; - culoarea liniei este de argint;
accident vascular cerebral (); - ATENȚIE! Fără această metodă, la sfârșit nu vor fi afișate liniile noastre și triunghiul nu va fi vizibil. Prin urmare, ne prescrie neapărat.
Interesant de lumea construirii site-urilor
V-ați abonat. Mulțumesc.
Articole similare
Trimiteți-le prietenilor: