HTML5 - Bezier -kurver

Det Bezier -kurver, De er en type kurver, der er meget udbredt i tegne- og grafikprogrammer, da de giver os mulighed for at generere kurver med nogle punkter i flyet, takket være dette med nogle matematiske formler kan vi opnå glatte eller mere præcise kurver, som vi kan bruge til at give dig mere detaljeret til vores diagrammer.
I HTML5 vi har mulighed for at implementere Bezier -kurver Takket være forskellige metoder kan vi inkludere kvadratiske og kubiske kurver, begrænsningen er, at vi på lærredet ikke har en visuel understøttelse af, hvor vi har referencepunkterne.
Metoder til at generere kurverne
Som vi allerede har forklaret, understøttes Bezier -kurverne på nogle punkter for at kunne tegne, for at opnå den ønskede kurve skal vi lave mange eksperimenter, men for at eksperimentere skal vi først kende baggrunden, så næste vi kommer til at se den tilsvarende information med de metoder, der giver os mulighed for at tegne disse kurver:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Tegn en Bezier -kurve af den kubiske type, hvor punkterne (x, y) mødes ved hjælp af kontrolpunkterne (cx1, cy1) og (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Tegn en kvadratisk Bezier -kurve til punkterne (x, y) med kontrolpunktet (cx, cy).
Vi kender allerede det tekniske aspekt, som vi skal arbejde med, nu skal vi se et eksempel i kode.
I dette eksempel tegner vi en kubisk Bezier -kurve, hvor vi skal tage udgangspunkt i den sidste delsti og derefter tage det til punkterne i de sidste to argumenter, som metoden modtager, derudover indeholder den en funktionalitet, at hvis vi trykker på shift- eller ctrl -tasten på vores tastatur, ændres kurvens start- og slutpunkt.

 Eksempel Din browser understøtter ikke elementet lærred 

Når vi har koden, lad os se, hvad den genererer i browseren, vi begrænser, at da den indeholder en dynamisk sektion, kan resultaterne variere:

Hvis vi ser, har vi de fire kontrolpunkter markeret med de røde linjer, som vi ser på skærmbilledet.
Med dette afslutter vi denne vejledning om Bezier -kurver, nøglen er eksperimentering, hvis vi vil opnå mere komplekse effekter, der er knyttet til det, vi har brug for.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