HTML5 - Canvas Element

Elementet Lerret Det er en av de mest etterlengtede nyhetene den har HTML5 Siden det er et seriøst alternativ til Adobes Flash-plug-in, takket være dets innebygde evner og ved ikke å være avhengig av et tredjepartsbibliotek, får vi stabilitet og nettleserstøtte direkte, i tilfelle et problem med implementeringen av HTML5-standarden .
Elementet Lerret lar oss avgrense et område i dokumentene våre HTML5 hvor vi kan tegne og til og med legge til effekter og bevegelser gjennom Javascript.
Canvas -elementet
Før du kan begynne å jobbe med varen Lerret, vi skal definere dens grunnleggende egenskaper, vi har at det er et flytelement, det er helt nytt i HTML5, dets attributter er høyde for høyde og bredde for bredde.
La oss se nedenfor et lite eksempel på hvordan vi kan definere et lerret i dokumentet vårt:

 Eksempel Din nettleser støtter ikke elementet lerret 

La oss raskt se hva som skjer i eksemplet; først definerer vi en stil der vi tildeler en litt tykk kant for å kunne skille vår Lerret tom, så starter vi Canvas -elementet med åpningsetiketten og definerer høyde- og breddeattributtene, inne i etikettene legger vi en melding i tilfelle dokumentet åpnes med en nettleser som ikke støtter denne spesifikasjonen av standarden.
La oss nå se hvordan denne koden som vi nettopp har forklart ser ut i nettleseren vår:

Som vi kan se for øyeblikket har vi bare grensene definert i stilene og et tomt område, dette betyr at nettleseren vår støtter bruk av Lerret.
Vår første tegning
Som vi nevnte i begynnelsen av opplæringen, må vi bruke Javascript for å tegne og utføre handlinger på lerretet, for dette vil vi bruke en metode kalt getContext () som plasserer oss i konteksten av lerretet, og med det kan vi fortelle det hva vi skal vise.
Vi kan tegne figurer i både 2D og 3D, for dette passerer vi i tilfelle av den første, argumentet "2d".
La oss se på følgende eksempel for bedre å definere det vi forklarer:

 Eksempel Din nettleser støtter ikke elementet lerret 

Her gjorde vi ganske enkelt å definere en variabel ctx som vi skal tildele objektet til dokument og sistnevnte kommer til å kalle metoden getContext og bruk den på Canvas -elementet; så har vi at variabelen ctx kaller en metode kalt fillRect og til dette passerer vi noen koordinater, hvis vi ser nøye, passerer vi det på 4 sider, la oss se at det har tegnet dette i nettleseren:

I dette eksemplet har vi tegnet en firkant i vår Lerret, Det er ikke noe spektakulært, men det hjelper oss å demonstrere hvordan dette elementet fungerer HTML5.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng