HTML5 - Tegning på lærredet

Nøglen til at have stærke strukturer er fundamenterne, for dette skal vi have stærke og veldefinerede fundamenter, derfor for at kunne bruge elementet til sin maksimale kapacitet Lærred Først skal vi kende de grundlæggende aspekter i dybden, og derfor vil vi begynde at tegne grundlæggende former, med dette lærer vi, hvordan de forskellige tegnemetoder fungerer, og derefter kan vi lave mere komplekse kompositioner.
Tegn et rektangel
Rektanglet er en meget enkel figur, der består af 4 sider, lad os se de metoder, vi har til rådighed for at kunne tegne det på lærredet:

• clearRect (x, y, w, h): Renser et rektangel eller en del af et tidligere angivet rektangel.
• fillRect (x, y, w, h): Bruges til at tegne et fyldt rektangel.
• strokeRect (x, y, w, h): Bruges til at tegne et rektangel uden fyld.

Som vi vil have bemærket, bruger de tidligere metoder alle 4 argumenter, disse argumenter svarer til følgende:

• x og er grænserne for den øverste venstre kant af rektanglet.
• W h svarer til henholdsvis bredde og højde.

Lad os se et enkelt eksempel, så vi kan implementere disse elementer i praksis:

 Eksempel Din browser understøtter ikke elementet lærred 

I dette eksempel ser vi, at vi definerer nogle variabler, hvor vi siger forskydning eller begrænse, hvor rektanglerne starter, størrelsen og derefter en var -tælling, der vil tjene som en tæller til at gøre gentagelserne, så vi ser i det næste afsnit, vi ved, at vi vil lave rektangler dynamisk, lad os se, hvordan de tegnes i vores browser:

Vi har lavet to rækker med 5 rektangler hver, hvis vi ser på den kode, vi havde kaldt metoderne fillRect () først til fyldte rektangler og derefter til strokeRect for de ikke-fyldte.
Ved hjælp af metoden clearRect ()
Hvad hvis vi nu vil rense en del af de fyldte rektangler? Til dette har vi metoden clearRect (), i følgende kode vil vi se, hvordan det fungerer:

 Eksempel Din browser understøtter ikke elementet lærred 

For hver gentagelse anvender vi et opkald til metoden clearRect () og når vi laver algoritmen, har vi fået den til at gå gennem hele midten af ​​de fyldte rektangler, lad os se i følgende billede, hvordan det ser ud i vores browser:

Her kan vi se, hvordan vi har renset et område, som vi tidligere havde tegnet.
Med dette afslutter vi denne vejledning, hvor vi har kunnet se lidt mere i dybden nogle metoder, som vi kan bruge til at tegne i vores element Lærred.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