HTML5 - Ritning på duken

Nyckeln till att ha starka strukturer är fundamenten, för detta måste vi ha starka och väldefinierade fundament, därför för att kunna använda elementet till sin maximala kapacitet Duk Först måste vi känna till de grundläggande aspekterna på djupet och det är därför vi ska börja rita grundläggande former, med detta lär vi oss hur de olika ritmetoderna fungerar och sedan kan vi göra mer komplexa kompositioner.
Rita en rektangel
Rektangeln är en mycket enkel figur som består av 4 sidor, låt oss se de metoder vi har tillgängliga för att kunna rita den på duken:

• clearRect (x, y, w, h): Rengör en rektangel eller en del av en tidigare angiven rektangel.
• fillRect (x, y, w, h): Används för att rita en fylld rektangel.
• strokeRect (x, y, w, h): Används för att rita en rektangel utan fyllning.

Som vi har märkt använder de tidigare metoderna alla fyra argument, dessa argument motsvarar följande:

• x och är gränserna för rektangelns övre vänstra kant.
• w h motsvarar bredd respektive höjd.

Låt oss se ett enkelt exempel så att vi kan omsätta dessa element i praktiken:

 Exempel Din webbläsare stöder inte elementet duk 

I det här exemplet ser vi att vi definierar några variabler, där vi säger offset eller begränsa var rektanglarna kommer att börja, storleken och sedan ett var -antal som kommer att fungera som en räknare för att göra repetitionerna, så vi ser i nästa avsnitt vi vet att vi kommer att göra rektanglar dynamiskt, låt oss se hur de ritas i vår webbläsare:

Vi har gjort två rader med 5 rektanglar vardera, om vi tittar på koden som vi hade kallat metoderna fillRect () först för fyllda rektanglar och sedan till strokeRect för de icke-fyllda.
Använda metoden clearRect ()
Vad händer om vi nu vill rengöra en del av de fyllda rektanglarna? För detta har vi metoden clearRect (), i följande kod kommer vi att se hur det fungerar:

 Exempel Din webbläsare stöder inte elementet duk 

För varje upprepning tillämpar vi ett samtal till metoden clearRect () och när vi gör algoritmen har vi fått den att gå igenom hela mitten av de fyllda rektanglarna, låt oss se i följande bild hur det ser ut i vår webbläsare:

Här kan vi se hur vi har rengjort ett område som vi tidigare ritat.
Med detta avslutar vi denna handledning där vi har kunnat se lite mer på djupet några metoder som vi kan använda för att rita in vårt element Duk.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng