HTML5 - Bezier -kurver

De Bezier kurver, De er en type kurver som er mye brukt i tegne- og grafikkprogrammer siden de lar oss generere kurver med noen punkter i planet, takket være dette med noen matematiske formler kan vi oppnå jevne eller mer eksakte kurver, som vi kan bruke til å gi du mer detaljert til våre diagrammer.
I HTML5 vi har muligheten til å implementere Bezier kurver Takket være forskjellige metoder kan vi inkludere kvadratiske og kubiske kurver, begrensningen er at vi på lerretet ikke har en visuell støtte for hvor vi har referansepunktene.
Metoder for å generere kurvene
Som vi allerede har forklart, støttes Bezier -kurvene på noen punkter for å kunne lage tegningen, for å oppnå ønsket kurve må vi gjøre mange eksperimenter, men for å eksperimentere må vi først kjenne bakgrunnen, så neste vi kommer til å se den tilsvarende informasjonen med metodene som lar oss tegne disse kurvene:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Tegn en Bezier -kurve av den kubiske typen der punktene (x, y) møtes ved hjelp av kontrollpunktene (cx1, cy1) og (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Tegn en kvadratisk Bezier -kurve til punktene (x, y) med kontrollpunktet (cx, cy).
Vi kjenner allerede det tekniske aspektet som vi må jobbe med, nå skal vi se et eksempel i kode.
I dette eksemplet skal vi tegne en kubisk Bezier -kurve, hvor vi skal ta den siste som utgangspunkt delsti og deretter ta den til punktene i de to siste argumentene som metoden mottar, i tillegg inneholder den en funksjonalitet at hvis vi trykker på shift- eller ctrl -tasten på tastaturet, endres start- og sluttpunktene for kurven.

 Eksempel Din nettleser støtter ikke elementet lerret 

Når vi har koden, la oss se hva den genererer i nettleseren, vi begrenser at ettersom den inneholder en dynamisk seksjon, kan resultatene variere:

Hvis vi ser, har vi de fire kontrollpunktene markert med de røde linjene som vi ser på skjermbildet.
Med dette fullfører vi denne opplæringen om Bezier -kurver, nøkkelen er eksperimentering hvis vi ønsker å oppnå mer komplekse effekter som er knyttet til det vi trenger.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng