HTML5 - Desen pe pânză

Cheia pentru a avea structuri puternice sunt fundamentele, pentru aceasta trebuie să avem fundații puternice și bine definite, prin urmare, pentru a putea folosi elementul la capacitatea sa maximă Pânză Mai întâi trebuie să cunoaștem aspectele de bază în profunzime și de aceea vom începe să desenăm forme de bază, cu aceasta vom învăța cum funcționează diferitele metode de desen și apoi putem face compoziții mai complexe.
Desenați un dreptunghi
Dreptunghiul este o figură foarte simplă, care constă din 4 laturi, să vedem metodele pe care le avem disponibile pentru a-l putea desena pe pânză:

• clearRect (x, y, w, h): Curăță un dreptunghi sau o parte a unui dreptunghi specificat anterior.
• fillRect (x, y, w, h): Folosit pentru a desena un dreptunghi umplut.
• strokeRect (x, y, w, h): Folosit pentru a desena un dreptunghi fără umplutură.

După cum vom observa, metodele anterioare folosesc toate 4 argumente, aceste argumente corespund următoarelor:

• x și sunt limitele marginii din stânga sus a dreptunghiului.
• w h corespund lățimii și respectiv înălțimii.

Să vedem un exemplu simplu, astfel încât să putem pune în practică aceste elemente:

 Exemplu Browserul dvs. nu acceptă elementul pânză 

În acest exemplu vedem că definim unele variabile, unde spunem decalaj sau limita de unde vor începe dreptunghiurile, dimensiunea și apoi un număr de var care va servi drept contor pentru a face repetări, așa că vedem în secțiunea următoare știm că vom face dreptunghiuri dinamic, să vedem cum sunt desenate în browser:

Am făcut două rânduri de câte 5 dreptunghiuri, dacă ne uităm la codul pe care l-am numit metodele fillRect () mai întâi pentru dreptunghiurile umplute și apoi la accident vascular cerebral pentru cele neumplute.
Folosind metoda clearRect ()
Ce se întâmplă dacă acum vrem să curățăm o parte din dreptunghiurile umplute? Pentru aceasta avem metoda clearRect (), în următorul cod vom vedea cum funcționează:

 Exemplu Browserul dvs. nu acceptă elementul pânză 

Pentru fiecare repetare aplicăm un apel metodei clearRect () și când facem algoritmul, l-am făcut să parcurgă întregul centru al dreptunghiurilor umplute, să vedem în imaginea următoare cum arată în browserul nostru:

Aici putem vedea cum am curățat o zonă pe care am desenat-o anterior.
Cu aceasta încheiem acest tutorial în care am putut vedea puțin mai în profunzime câteva metode pe care le putem folosi pentru a desena în elementul nostru Pânză.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv