HTML5 - Canvas Element

Elementet Lærred Det er en af ​​de mest forventede nyheder, den har HTML5 Da det er et seriøst alternativ til Adobes Flash-plug-in, takket være dets indbyggede funktioner og ved ikke at være afhængig af et tredjepartsbibliotek, opnår vi stabilitet og browsersupport direkte i tilfælde af et problem med implementeringen af ​​HTML5-standarden .
Elementet Lærred giver os mulighed for at afgrænse et område i vores dokumenter HTML5 hvor vi kan tegne og endda tilføje effekter og bevægelser gennem Javascript.
Canvas -elementet
Inden du kan begynde at arbejde med varen Lærred, vi vil definere dets grundlæggende egenskaber, vi har, at det er et flowelement, det er helt nyt i HTML5, dets attributter er højde for dets højde og bredde for dets bredde.
Lad os se nedenfor et lille eksempel på, hvordan vi kan definere et lærred i vores dokument:

 Eksempel Din browser understøtter ikke elementet lærred 

Lad os hurtigt se, hvad der sker i eksemplet; først definerer vi en stil, hvor vi tildeler en lidt tyk kant for at kunne skelne vores Lærred tom, så starter vi Canvas -elementet med dets åbningsmærkat og definerer dets højde- og breddeattributter, inden for etiketterne placerer vi en besked, hvis dokumentet åbnes med en browser, der ikke understøtter denne specifikation af standarden.
Lad os nu se, hvordan denne kode, som vi lige har forklaret, ser ud i vores browser:

Som vi kan se i øjeblikket har vi kun grænserne defineret i stilarterne og et tomt område, det betyder, at vores browser understøtter brugen af Lærred.
Vores første tegning
Som vi nævnte i begyndelsen af ​​selvstudiet, for at tegne og udføre handlinger inden for lærredet skal vi bruge Javascript, til dette vil vi bruge en metode kaldet getContext () der placerer os i konteksten af ​​lærredet, og med det kan vi fortælle det, hvad de skal vise.
Vi kan tegne figurer i både 2D og 3D, for dette passerer vi i tilfælde af den første, argumentet "2d".
Lad os se på følgende eksempel for bedre at definere, hvad vi forklarer:

 Eksempel Din browser understøtter ikke elementet lærred 

Her gjorde vi simpelthen at definere en variabel ctx hvortil vi vil tildele objektet dokument og sidstnævnte kommer til at kalde metoden getContext og anvende det på lærredselementet; så har vi, at variablen ctx kalder en metode kaldet fillRect og hertil sender vi nogle koordinater, hvis vi ser godt efter, passerer vi det 4 sider, lad os se, at det har tegnet dette i browseren:

I dette eksempel har vi tegnet en firkant i vores Lærred, Det er ikke noget spektakulært, men det hjælper os med at demonstrere, hvordan dette element fungerer HTML5.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt