Lerret i HTML | Forklart med eksempler

Her, id = lerret som vil bli brukt i skriptet for å finne lerretelementet, bredde og høydeattributter, sett lerretsbredden og høyden som 250px og stilattributt brukes til å style lerretelementet.

Hvordan bruke lerret med JavaScript

I denne delen vil vi gi en trinn-for-trinns guide for bruk av elementet med JavaScript. Vi må følge de under-nevnte trinnene for å fortsette:

For det første må vi få elementet og for dette formålet “GetElementId ()” Metoden vil bli brukt som vist i kodebiten nedenfor:

Deretter vil vi lage et tegneobjekt ved hjelp av et innebygd objekt “GetContext ()” Og inne i dette objektet vil vi spesifisere en dimensjon som 2-dimensjonal som vist i figuren nedenfor:

Det siste trinnet er å tegne på lerretet, vi vil spesifisere en “Fillstyle” Eiendom for å sette en farge for tegningen:

Hvordan tegne grunnleggende former på lerret

Denne delen vil utdype hvordan du tegner et rektangel, linje og sirkel på lerret:

Rektangel

For å tegne et rektangel på lerretet, bruker vi en fillRect () -metode. Det vil ta fire verdier: først for X-koordinat, andre for Y-koordinat, tredje for bredden, og fjerde for høyden.

Her er vårt komplette kodebit for å tegne et rektangel på lerret: