HTML5 - Bezier -kurvor

De Bezier kurvor, De är en typ av kurvor som ofta används i rit- och grafikprogram eftersom de tillåter oss att generera kurvor med några punkter i planet, tack vare detta med några matematiska formler kan vi uppnå släta eller mer exakta kurvor, som vi kan använda för att ge mer detaljerad information om våra diagram.
I HTML5 vi har möjlighet att genomföra Bezier kurvor Tack vare olika metoder kan vi inkludera kvadratiska och kubiska kurvor, begränsningen är att vi på duken inte har ett visuellt stöd för var vi har referenspunkterna.
Metoder för att generera kurvorna
Som vi redan har förklarat stöds Bezier -kurvorna på vissa punkter för att kunna göra ritningen, för att uppnå den önskade kurvan måste vi göra många experiment, men för att experimentera måste vi först känna till bakgrunden, så nästa vi kommer att se motsvarande information med de metoder som gör att vi kan rita dessa kurvor:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Rita en Bezier -kurva av den kubiska typen där punkterna (x, y) möts med hjälp av kontrollpunkterna (cx1, cy1) och (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Rita en kvadratisk Bezier -kurva till punkterna (x, y) med kontrollpunkten (cx, cy).
Vi känner redan till den tekniska aspekten som vi måste arbeta med, nu ska vi se ett exempel i kod.
I det här exemplet ska vi rita en kubisk Bezier -kurva, där vi ska ta den sista som utgångspunkt delväg och sedan ta det till punkterna i de två sista argumenten som metoden tar emot, dessutom innehåller den en funktionalitet att om vi trycker på skift- eller ctrl -tangenten på vårt tangentbord, ändras start- och slutpunkterna för kurvan.

 Exempel Din webbläsare stöder inte elementet duk 

När vi har koden, låt oss se vad den genererar i webbläsaren, vi begränsar att eftersom den innehåller ett dynamiskt avsnitt kan resultaten variera:

Om vi ​​tittar har vi de fyra kontrollpunkterna markerade med de röda linjerna som vi ser på skärmdumpen.
Med detta avslutar vi denna handledning om Bezier -kurvor, nyckeln är experiment om vi vill uppnå mer komplexa effekter som är kopplade till det vi behöver.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