Creați și proiectați-vă site-urile pe web.

Pânză de bază

Creați-vă propriile desene și animații cu Canvas în HTML5

Și acum învățați să programați în C ++ cu Aprende Web C++

Manuale pentru crearea și proiectarea paginilor web

Introducere

1. HTML nou 5

  • 1.1. Ce este nou în HTML 5
  • 1.2. Structura paginii
  • 1.3. Formulare
  • 1.4. Multimedia
  • 1.5. Alte etichete
  • 1.6. Elemente șterse
  • 1.7. Tragere și plasare
  • 1.8. Geolocalizare
  • 1.9. Depozitare locală

2. CSS nou 3

  • 2.1. Noutăți în CSS3
  • 2.2. Fonduri multiple
  • 2.3. Mai multe proprietăți ale fondului
  • 2.4. Colturi rotunjite
  • 2.5. Borduri cu imagini
  • 2.6. Nuanțe
  • 2.7. Transparențe
  • 2.8. Coloane multiple
  • 2.9. Texte
  • 2.10. Tipuri de caractere
  • 2.11. Cutii flexibile
  • 2.12. Alte proprietăți
  • 2.13. Selectoare noi.

3. Animație în CSS3

  • 3.1. Prima mea animație
  • 3.2. Proprietăți de animație
  • 3.3. Exemplu de animație
  • 3.4. Tranziții
  • 3.5. Proprietatea de transformare
  • 3.6. Transformă în Internet Explorer
  • 3.7. Animații cu transformare
  • 3.8. Animații 3D

4. Canvas de bază HTML5

  • 4.1. Primul desen cu pânză
  • 4.2. Lansați pânza
  • 4.3. Dreptunghiuri
  • 4.4. Desenați trasee
  • 4.5. Stiluri de linie
  • 4.6. Desenați arcade
  • 4.7. Curbele Bezier
  • 4.8. Gradient de culoare
  • 4.9. Umbre și transparențe
  • 4.10. Texte
  • 4.11. Inserați imagini
  • 4.12. Lucrați cu imagini

5. Canvas HTML5 avansat

  • 5.1. Cuiburi multiple
  • 5.2. Umplerea figurii
  • 5.3. Salvați și restaurați
  • 5.4. Regiunea potrivită
  • 5.5. Compoziţie
  • 5.6. Traducere
  • 5.7. Rotație
  • 5.8. Scalat
  • 5.9. Transformare

6. SVG în HTML5

  • 6.1. Introducere
  • 6.2. Cifre de bază
  • 6.3. Desenați trasee
  • 6.4. Text
  • 6.5. Umplerea figurii
  • 6.6. Gradient de culoare
  • 6.7. Alte elemente
  • 6.8. Transformări
  • 6.9. Mai scump
  • 6.10. Animație I
  • 6.11. Animație II
  • 6.12. Mai multe despre SVG

6. Versiunea mobilă

Căutați în Aprende Web

Traducere pagină

Vizitați blogul nostru:

și află ce este nou sau lasă un comentariu.

Întrebări și sugestii:

Despre această pagină

ultima modificare: 13-07-2018.

Vizite în această lună: 62

Vizite luna trecută: 114

WEB-GRAFICĂ

Mulțumesc pentru următoarele pagini web. pe care m-am bazat pentru pregătirea acestui manual:

Donații

Dacă vi se pare interesant acest site, puteți contribui cu o mică contribuție.

Stiluri de linie

stiluri

Lățimea liniei

Pe această pagină vom vedea mai multe proprietăți care pot fi aplicate pentru a varia stilul liniei și a umplerii elementelor pânzei. Vom începe prin modificarea grosimii liniei.

Puteți modifica greutatea liniei în Canvas cu proprietatea:

Unde valoarea n este un număr care indică grosimea liniei în pixeli.

Proprietatea afectează toate liniile înainte de metoda stroke (). Pentru a schimba grosimea liniei următoare trebuie să apelăm mai întâi metoda stroke () și apoi lineWidth ();

Să vedem un exemplu: punem mai întâi codul HTML al pânzei:

Apoi scriem codul javascript. Amintiți-vă că atât pentru acest exemplu, cât și pentru următoarele, trebuie să avem deja în codul javascript funcția startCanvas () văzută pe a doua pagină a acestui manual.

Rezultatul acestei pânze poate fi văzut aici în dreapta.

Vom face acum un al doilea exemplu în care vom pune mai multe linii care scad progresiv în grosime. Pentru a nu prelungi excesiv codul, putem folosi o buclă care repetă instrucțiunile de pe fiecare linie; codul HTML al pânzei va fi:

Și codul javascript, care va fi inclus în window.onload = function () va fi următorul:

Rezultatul scriptului anterior poate fi văzut aici în dreapta.

Folosind o buclă aici, am evitat să scriem în mod repetat codul pentru fiecare dintre linii. După cum puteți vedea, toate resursele javascript pot fi folosite pentru a le aplica metodelor și proprietăților pânzei. Acest lucru deschide o serie întreagă de posibilități, cum ar fi ca utilizatorul să intervină în proiectare prin intermediul formularelor, să creeze elemente animate etc.

stil de capăt de linie

Putem modifica și capetele liniei. Pentru aceasta, linia trebuie să fie suficient de groasă, astfel încât să poată fi văzută diferența de stil. Pentru aceasta vom folosi proprietatea lineCap

Valorile posibile pe care le acceptă această proprietate sunt:

  • „fund”: valoare implicită, lăsați linia așa cum este.
  • „rotund”: adăugați un semicerc la începutul și la sfârșitul liniei, lăsând capetele rotunjite.
  • „pătrat”: adăugați o jumătate de pătrat la începutul și la sfârșitul liniei.

Valorile trebuie incluse între ghilimele (cu excepția cazului în care sunt conținute într-o variabilă), deoarece sunt șiruri de text. În opțiunile „rotund” și „pătrat”, linia este prelungită cu același număr de pixeli pe care este gros (jumătate dintre ei la fiecare capăt).

Proprietatea afectează întregul traseu, așa că, dacă dorim să schimbăm stilul final, trebuie să începem un nou traseu.

Să vedem un exemplu care arată toate cele trei tipuri de capăt de linie. Vom începe cu codul HTML al pânzei:

Și apoi oferim codul javascript, deoarece ar trebui să fie încărcat întotdeauna după pagină, astfel încât să îl includem în funcția window.onload = function ().

Rezultatul codului anterior îl vedem în pânza din dreapta. Valorile „rotund” și „pătrat” alungesc linia cu același număr de pixeli pe care este gros.

Stil de colț

Când există două linii drepte la rând, adică fac un colț, proprietatea lineCap nu ne ajută să le schimbăm stilul. Acest lucru se aplică numai la începutul primei linii și la sfârșitul ultimei linii. Pentru a varia forma colțului vom folosi proprietatea lineJoin.

Valorile posibile pe care le acceptă această proprietate sunt:

  • „mitre”: valoare implicită: colțul dintre două linii își ia forma normală.
  • „rotund”: colțul dintre două linii are o formă rotunjită.
  • „teșit”: colțul dintre două linii este tăiat astfel încât să fie șanțuit.

La fel ca proprietatea anterioară, aceasta afectează întregul traseu, așa că, dacă dorim să schimbăm stilul, trebuie să creăm un traseu nou. Să vedem un exemplu cu valorile acestei proprietăți. Mai întâi creăm codul HTML pentru pânză:

Apoi vom scrie codul javascript pentru pânză; ca întotdeauna îl includem în fereastra.onload = function ().

Rezultatul pânzei este cel prezentat aici în dreapta.

Colțurile dintre linii dobândesc stiluri diferite în funcție de valoarea aplicată metodei lineJoin.

Până acum am făcut linii drepte, dar cu pânza puteți face și linii curbe, vom vedea acest lucru în paginile următoare